> The other day I was looking for a simple, dependency free, tabs component. You know, the canonical example of something that is easy to do with Web Components, the example 50% of tutorials mention. I didn’t even care what it looked like, it was for a testing interface. I just wanted something that is small and works like a normal HTML element. Yet, it proved so hard I ended up writing my own!
I was looking for some examples of the better approach the author seems to want, but didn't find them.
Found some in the article linked near the bottom:
https://www.smashingmagazine.com/2017/02/designing-html-apis...
The author gives an example of a list-type component. It can be initialized in one of two ways:
- JS-first: an empty list element is added and a JS initializer populates the children from data
- HTML-first: the full markup for the list is added, including children, and the JS works in the background to build the right internal data representation
The rest of the article gives specific, actionable advice on building HTML-first components. For this reason, I think it's a better article to start with.
replies(1):