JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://unpkg.com/webcompose@latest/dist/webcompose.min.js"></script>
<hello-worldly greeting="Bonjour" name="Monde"></hello-worldly>
JavaScript
const { ComposableElement, html } = window.webcompose
class HelloWorldly extends ComposableElement {
static get observedAttributes() {return ['greeting','name']; }
static get properties() {
return {
greeting: {type:String, value:"Hello", attr:"greeting"},
name: {type:String, value:"World", attr:"name"}
}
}
static render({greeting,name}){
return html`
${greeting} ${name}
`
}
}
customElements.define("hello-worldly", HelloWorldly);