Announcing Platformer: a set of libraries to help implement:
• attribute reflection in web components following the HTML specification
• WebIDL type coercions for your public JS APIs (including web component properties)
For those interested, I just published on GitHub a series of tests for reflecting attributes in web components (see https://blog.ltgt.net/web-component-properties/ for the rationale, I'll update it soon following those tests), reusing the same tests as used by browsers for built-in elements.
Tests include (for now) vanilla custom elements and Lit custom elements.
Built-in HTML elements' properties all share similar behaviors, that don't come for free when you write your own custom elements. Let's see what those behaviors are, why you'd want to implement them in your web components, and how to do it, including how some web component libraries actually don't allow you to mimic those behaviors.
I think such libraries are the missing link of Web Components. Declarative attribute/prop handling instead of manual boilerplate. React to changes. Less opinionated, more flexible than libraries like Lit. Can be used with a template language or operate on the existing DOM. Light or shadow DOM.
@molily@sir_pepe Fwiw, this actually looks a lot like Lit's ReactiveElement: @property and @state properties become reactive and trigger a call to the update() method where you can update your element the way you want it.
LitElement extends ReactiveElement to render using lit-html, but ReactiveElement can be used standalone.