2 ms·
Check out LitElement. It lets you define everything in one place, and because it uses Shadow DOM, CSS is handled as well. Here's where we'll be with plain stan
by spankalee 8y ago
Check out LitElement. It lets you define everything in one place, and because it uses Shadow DOM, CSS is handled as well.
Here's where we'll be with plain standard JavaScript once class fields and decorators land:
import {LitElement, html, property, customElement} from '@polymer/lit-element';
@customElement('hello-element')
class HelloElement extends LitElement {
@property() name = 'World';
render() {
return html`
<style>
:host {
display: block;
background: blue;
}
h1 {
color: white; // scoped to the ShadowRoot
}
</style>
<h1>Hello ${this.name}!</h1>
`;
}
}