custom-elements

set of custom (vanilla) elements following Material Design 3 spec

disclaimer: This is not as advanced as the material-components set

Elements

custom-theme

  the start for all elements (for now).   custom-theme can be used to switch defined token values   the idea is just to use material design tokens   this should allow us to use DSP generated tokens   note: only JS tokens supported for now.   

<custom-theme language="js" path="./themes/default/tokens.js"></custom-theme>

Under the hood

lit-html

  Uses lit-html to render,   this brings allot of extra features checkout lit-html

examples

bind to attribute

html`<my-el value=${this.value}></my-el>`

bind to property

html`<my-el .value=${this.value}></my-el>`

setting attributes

html`<my-el ?disabled=${this.disabled}></my-el>`

declarative events

html`<my-el @click=${() => console.log('click')}></my-el>`