In this section we'll review a little bit about how you can use Web Components in Greenwood. Both the native HTMLElement
and LitElement
are available by default.
footer.js
class FooterComponent extends HTMLElement {
constructor() {
super();
// create a closed Shadow DOM
this.root = this.attachShadow({ mode: 'closed' });
}
// run some code when the component is ready
connectedCallback() {
this.root.innerHTML = this.getTemplate();
}
// create templates that interpolate variables and HTML!
getTemplate() {
const year = new Date().getFullYear();
return `<header>This is the header component. © ${year}</header>`;
}
}
customElements.define('x-footer', FooterComponent);
You can then import it in a template and use it within your templates render
function.
import { html, LitElement } from 'lit-element';
import '../components/footer';
class PageTemplate extends LitElement {
constructor() {
super();
}
render() {
return html`
<section class='container'>
<entry></entry>
</section>
<section
<x-footer></x-footer>
</section>
`;
}
}
customElements.define('page-template', PageTemplate);
A simple example of a web component utilizing a basic LitElement base class
hello-world.js
import { html, LitElement } from 'lit-element';
class HelloWorld extends LitElement {
constructor() {
super();
}
render() {
return html`
<div>
<h1>Hello World!</h1>
</div>
`;
}
}
customElements.define('hello-world', HelloWorld);
Which can then imported and used with
import './hello-world.js'
render() {
return html`
<hello-world></hello-world>
`
}