Another rant about #WebComponents.
I can't have better things with customized built-in elements and just use native button with shadow DOM attached to it. So the only reliable thing left to do is wrapping it. https://component.kitchen/blog/posts/writing-a-web-component-that-wraps-a-standard-html-element-might-alleviate-the-need-for-is-syntax
To be fair to #WebComponents effort, I found one good use for customized built-in elements that will work in any browser now.
Extend table/tr for data-heavy custom table and cells. You can make rows like <tr is="my-row"> within <table is="my-table">, and for non-JS users they'll be rendered as a usual table.
This is also pretty darn easy to explain to backend devs! One measly "is" attribute - and #components can be hydrated gracefully.
UPD: It's actually complicated, read my reply.
@acbilson forget what I said...
As they stand now without framework - #WebComponents are a nightmare to do in #vanillaJS. Let my last three weeks of back and forth be a testament to that!
(눈_눈)
Tried to attach #ShadowDOM to this blasted table, and it won't let me. Turns out we can have it on only so much base elements, and the most generic ones at that: div, article, section, etc.
To top it all, unhelpful #JavaScript error messages made me go debugging for other 3 hours!