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:

KeyValue
standardA normal HTML root
shadowAn open Shadow DOM root
shadow:closedA closed Shadow DOM root
// import the createComponent function
import { createCustomElement } from 'https://cdn.skypack.dev/ficusjs@3/custom-element'

// import the renderer and html tagged template literal from the htm renderer
import { html, renderer } from 'https://cdn.skypack.dev/@ficusjs/renderers@3/htm'

createCustomElement('my-component', {
renderer,
root: 'shadow',
props: {
personName: {
type: String,
required: true
}
},
mounted () {
console.log(this.shadowRoot.querySelector('p').textContent)
},
render () {
return html`
<p>
Hi, there! My name is
${this.props.personName}
</p>
`

}
})