Root definition #

You can use a standard root, a closed Shadow DOM root or an open Shadow DOM root by specifying a root in your config object:

standardA normal HTML root
shadowAn open Shadow DOM root
shadow:closedA closed Shadow DOM root
// import the createComponent function
import { createCustomElement } from ''

// import the renderer and html tagged template literal from the htm renderer
import { html, renderer } from ''

createCustomElement('my-component', {
root: 'shadow',
props: {
personName: {
type: String,
required: true
mounted () {
render () {
return html`
Hi, there! My name is