TemplateBuilder

The class TemplateBuilder provides service to initialize the HTML content of the custom element.

The static method TemplateBuilder.get(content) returns a fresh builder. The builder expects a content in string or a function providing it.

import {TemplateBuilder} from '@tmorin/ceb'
// creates the builder
const builder = TemplateBuilder.get('<strong>the content</strong>')

The builder and underlying decorators are also technically documented: TemplateBuilder.

Initialize the shadow DOM

By default, the builder initializes the light DOM of the custom element. The method TemplateBuilder#shadow(focus) can be used to force the initialization of a shadow DOM.

import {TemplateBuilder} from '@tmorin/ceb'
// initializes the shadow DOM of the custom element
const builder = TemplateBuilder.get('a content').shadow()

The decorator

Templates can also be defined using decorators.

import {ElementBuilder, TemplateBuilder} from '@tmorin/ceb'
// register the custom element
@ElementBuilder.element<MyCustomElement>()
// define the template
@TemplateBuilder.template({content: '<p><input></p>', isShadow: true})
// defines the custom element class
class MyCustomElement extends HTMLElement {
}

Example

The registered custom element is initialized with a shadow DOM wrapping its light DOM.

See the Pen </ceb> ~ TemplateBuilder by Thibault Morin (@tmorin) on CodePen.