|
<!doctype html> |
|
<head> |
|
<script src="/-/@webcomponents/webcomponentsjs@2.2.8/webcomponents-bundle.js"></script> |
|
<script type="module" src="/-/es-module-shims@0.2.3/dist/es-module-shims.js"></script> |
|
<script type="importmap-shim" src="/-/importmap.json"></script> |
|
<script type="module-shim"> |
|
import { LitElement, css } from 'lit-element@2'; |
|
import { html } from 'lit-html@1'; |
|
|
|
class MyElement extends LitElement { |
|
|
|
static get properties() { |
|
return { |
|
mood: {type: String} |
|
} |
|
} |
|
|
|
static get styles() { |
|
return css`.mood { color: green; }`; |
|
} |
|
|
|
render() { |
|
return html`Web Components are <span class="mood">${this.mood}</span>!`; |
|
} |
|
} |
|
|
|
customElements.define('my-element', MyElement); |
|
</script> |
|
</head> |
|
<body> |
|
<my-element mood="great"></my-element> |
|
</body> |
|
</html> |