-
Notifications
You must be signed in to change notification settings - Fork 3
HTML Templating with lit html
Andre Kless edited this page Feb 24, 2021
·
7 revisions
content is up-to-date for ccm v26.1.1
Since ccmjs v26 you can also specify HTML templates via lit-html.
Usually, a templates.mjs
is stored in the resources folder of a component, via which the HTML templates can then be specified, for example, as follows:
/**
* @overview HTML templates of ccmjs-based web component for ...
* @author André Kless <[email protected]> 2021
*/
import { html, render } from 'https://esm.run/lit-html';
export { render };
/**
* returns the main HTML template
* @param {string} name - Name of the person being greeted.
* @returns {TemplateResult} main HTML template
*/
export function main( name = "World" ) {
return html`
<div id="main">
Hello, ${name}!
</div>
`;
}
... (more templates)
The templates are then integrated and used in the component as follows:
...
( () => {
const component = {
...
config: {
...
"html": [ "ccm.load", "./resources/templates.mjs" ],
...
},
Instance: function () {
...
this.start = async () => {
...
self.html.render( this.ccm.helper.html( self.html.main, "John" ), this.element );
...
};
...
}
};
...
} )();