from Hacker News

Custom Elements v1: Reusable Web Components

by markelliot on 8/21/17, 4:29 AM with 37 comments

• by romaniv on 8/21/17, 1:29 PM

  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.

  I think it would be much better for the web if browsers had a sane API for extending behaviors of any tag via attributes. This would make things easily composable and eliminate most problems of traditional component-based systems.

      <button does-stuff does-more-stuff></button>
  

  It would be even better if people working on these specs spent some time reading research papers on how a sane component-based system could work. For example: http://alumni.media.mit.edu/~mt/thesis/mt-thesis-Contents.ht... A lot of interesting ideas regarding extensible behaviors and ease of understanding.

  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.

• by SimeVidas on 8/21/17, 9:45 AM

  This article has been added 5 days ago [1], in case anyone is wondering how recent it is.

  [1]: https://github.com/google/WebFundamentals/commits/master/src...

• by kevinSuttle on 8/21/17, 2:35 PM

  This is the kicker for me:

  > 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.

  I would love to just be able to "fix" the normalization around several built-in elements.

• by voiper1 on 8/21/17, 4:37 AM

  Interesting. Only in Chrome 54/Safari 10.1/Opera 46 so far. http://caniuse.com/#search=web%20components

  But there's a polyfill, and more discussion here:

  https://developers.google.com/web/fundamentals/architecture/...

• by VeejayRampay on 8/21/17, 11:41 AM

  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.

• by microo8 on 8/21/17, 12:20 PM

  You can use custom elements also in golang :)

  https://github.com/microo8/golymer

• by macawfish on 8/21/17, 8:47 PM

  I've had some success with Custom Elements, using skate.js as a higher level interface.

  This piano keyboard element: https://micahscopes.github.io/all-around-keyboard/

  Some elements for quickly drawing graphs in html: https://micahscopes.github.io/tangled-web-components/example...

  (It still needs some more convenient ways of defining the graph structure, as well as an interface to do force layouts.)

  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.

  Today, I'd probably just do it in plain javascript, since the spec is more stable now.

• by megous on 8/21/17, 3:20 PM

  Is it possible to nest custom elements? I suppose it should be, but how would it be seen in DOM?

  <my-container> <some-child some-attr></some-child> </my-container>

  How can I get notifications in my-container when someone from outside adds another child to it?

• by pjmlp on 8/21/17, 12:12 PM

  Customs Elements is what would make me quite happy with UI design on the browser side.

  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.

• by albertTJames on 8/21/17, 1:28 PM

  could it replace React ?

• by cztomsik on 8/21/17, 1:15 PM

  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)

• by megamindbrian on 8/21/17, 7:15 PM

  Cool! I can't wait for Google to abandon this!

• by dmitriid on 8/21/17, 8:06 AM

  Custom Elements v1. Designed by committee: https://pbs.twimg.com/media/DALwpYnUAAESRjr.jpg

  Polymer. Designed by people who actually do web development: https://pbs.twimg.com/media/DALwpYWVoAAIvkQ.jpg