Concepts
Introduction to Web Components and Medblocks UI
Medblocks UI is built using Lit, a framework for web components. Here are some basic concepts to understand how to use these elements.
For a list of all web components available and their properties, attributes, and events, please visit the Github documentation.
medblocks-ui/documentation at master · medblocks/medblocks-ui
GitHub

Attributes and Properties

When you import medblocks-ui, multiple custom elements get registered in your browser. This allows the usage of elements that are not covered in the base HTML specification:
1
<mb-input label="Hello there"></mb-input>
Copied!
The behavior of these elements can be configured using attributes and properties.
Attributes: Are what you see represented in the HTML code. Eg: label="Hello there"
Properties: What you can programmatically set using Javascript on an element. Eg: Select the element, and do $0.label = "Hello there"
Most attributes in Medblocks UI also have a corresponding property, but not all properties, have an attribute of the same name. For example, if you want to set the ctx on mb-form, you'll have to use a property because you need to pass an Object:
Plain HTML
1
<mb-form>
2
</mb-form>
3
<script>
4
document.querySelector('mb-form').ctx = {"composer": "Dr. Bean"}
5
</script>
Copied!
Using <mb-form ctx="{'hello': 'there'}"> does NOT work, because attributes can only pass strings.
However, in most modern frameworks, this issue has been addressed.
In Vue:
1
<template>
2
<mb-form :ctx.prop="data"></mb-form>
3
</template>
Copied!
In Svelte:
1
<mb-form ctx={data} />
Copied!
For a more definite list of how to set properties and attributes in your favorite framework, check out the Custom Elements Everywhere website.

Listening to events

Just like normal HTML elements, custom elements emit events. These are Custom Events and can be listened to by using the same event listeners:
1
<mb-form id="form">
2
<mb-input path="name" label="What's your name?"></mb-input>
3
<mb-submit>
4
<button>Submit</button>
5
</mb-submit>
6
</mb-form>
7
8
<script>
9
// Pure javascript version of JQuery's $('document').ready
10
document.addEventListener("DOMContentLoaded", ()=>{
11
var form = document.getElementById("form");
12
// Listen for mb-submit event
13
form.addEventListner("mb-submit", (event)=>{console.log(event.detail)})
14
});
15
</script>
Copied!
However, most frameworks have a sophisticated way to listen to events.
In Vue:
1
<mb-form id="form" @mb-submit="handleEvent">
2
<mb-input path="name" label="What's your name?"></mb-input>
3
<mb-submit>
4
<button>Submit</button>
5
</mb-submit>
6
</mb-form>
Copied!
In Svelte:
1
<mb-form id="form" on:mb-submit="handleEvent">
2
<mb-input path="name" label="What's your name?" />
3
<mb-submit>
4
<button>Submit</button>
5
</mb-submit>
6
</mb-form>
Copied!
For a more definite list of how to listen to events in your favorite framework, check out the Custom Elements Everywhere website.
Last modified 1mo ago