Components with extensibility through inheritance written in a prototype-based language. Having worked with around a dozen component-based systems over the years I'm not particularly enthusiastic.<p>I think it would be much better for the web if browsers had a sane API for extending <i>behaviors</i> of any tag via attributes. This would make things easily composable and eliminate most problems of traditional component-based systems.<p><pre><code> <button does-stuff does-more-stuff></button>
</code></pre>
It would be even better if people working on these specs spent some time reading research papers on how a sane component-based system <i>could</i> work. For example: <a href="http://alumni.media.mit.edu/~mt/thesis/mt-thesis-Contents.html" rel="nofollow">http://alumni.media.mit.edu/~mt/thesis/mt-thesis-Contents.ht...</a> A lot of interesting ideas regarding extensible behaviors and ease of understanding.<p>Edit: And yes, I'm aware of is="" functionality. It's not exactly what I'm talking about. In fact, if the specs were designed the way I mentioned, there would be no need for making anything special for built-in elements as opposed to the new ones.
This article has been added 5 days ago [1], in case anyone is wondering how recent it is.<p>[1]: <a href="https://github.com/google/WebFundamentals/commits/master/src/content/en/fundamentals/architecture/building-components/customelements.md" rel="nofollow">https://github.com/google/WebFundamentals/commits/master/src...</a>
This is the kicker for me:<p>> At time of writing, no browser has implemented customized built-in elements. Chrome plans to implement them (status) but other browsers have expressed distaste for implementing the is="" syntax.<p>I would love to just be able to "fix" the normalization around several built-in elements.
Interesting. Only in Chrome 54/Safari 10.1/Opera 46 so far.
<a href="http://caniuse.com/#search=web%20components" rel="nofollow">http://caniuse.com/#search=web%20components</a><p>But there's a polyfill, and more discussion here:<p><a href="https://developers.google.com/web/fundamentals/architecture/building-components/customelements#historysupport" rel="nofollow">https://developers.google.com/web/fundamentals/architecture/...</a>
Excellent tutorial, as usual from Eric Bidelman. It's a lot of information to digest though, one should take time with all the different bits and pieces covered in this article.
You can use custom elements also in golang :)<p><a href="https://github.com/microo8/golymer" rel="nofollow">https://github.com/microo8/golymer</a>
I've had some success with Custom Elements, using skate.js as a higher level interface.<p>This piano keyboard element: <a href="https://micahscopes.github.io/all-around-keyboard/" rel="nofollow">https://micahscopes.github.io/all-around-keyboard/</a><p>Some elements for quickly drawing graphs in html:
<a href="https://micahscopes.github.io/tangled-web-components/examples/" rel="nofollow">https://micahscopes.github.io/tangled-web-components/example...</a><p>(It still needs some more convenient ways of defining the graph structure, as well as an interface to do force layouts.)<p>I haven't worked on either project in a while. I kinda got tired working with the development version of skate.js while the custom elements spec was changing so fast. It's an excellent library, but things were moving too quickly for me to keep up.<p>Today, I'd probably just do it in plain javascript, since the spec is more stable now.
Is it possible to nest custom elements? I suppose it should be, but how would it be seen in DOM?<p><my-container>
<some-child some-attr></some-child>
</my-container><p>How can I get notifications in my-container when someone from outside adds another child to it?
Customs Elements is what would make me quite happy with UI design on the browser side.<p>Now just have to wait a few years to be able to use it, or hope the polyfills actually cover all the browsers versions we might need to target.
please correct me if I'm wrong but it seems that custom elements still do nothing about dependency hell (it's not possible to use same lib in different versions)
Custom Elements v1. Designed by committee: <a href="https://pbs.twimg.com/media/DALwpYnUAAESRjr.jpg" rel="nofollow">https://pbs.twimg.com/media/DALwpYnUAAESRjr.jpg</a><p>Polymer. Designed by people who actually do web development: <a href="https://pbs.twimg.com/media/DALwpYWVoAAIvkQ.jpg" rel="nofollow">https://pbs.twimg.com/media/DALwpYWVoAAIvkQ.jpg</a>