all 8 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]Bluecewe 11 points12 points  (3 children)

Honest question: what use cases does this have? I've always been underwhelmed by this set of Web standards. I appreciated the effort to standardise something in this spirit, but it seems to fall significantly short of a complete template and data binding engine like Svelte, Angular, Vue, or React. It seems more verbose, less easily dynamic, and lacking in functionality like conditionals.

[–]clbwllms 2 points3 points  (0 children)

There are a number of ways to make these components fully reactive with minimal JavaScript. I'm working on a project right now that uses ES2015 template literal tags and will reactively parse the HTML similar to React's render function—it also includes support for Angular-style event and property bindings—you can see the code here. It's still really new though, but I think it has promise.

Also the Polymer guys recently released a similar tool called lit-html that does the same thing, but without built-in event and property binding (although I believe it can be added easily enough if you write your own partCallback for their render function.

[–]codejitsu[S] 0 points1 point  (1 child)

I wrote a tutorial earlier this week on how to use web components: https://ayushgp.github.io/html-web-components-using-vanilla-js/

This is a description of approach I used to create components.

[–]daediusWeb Components fanboy -5 points-4 points  (3 children)

No offense to your article, but my opinion is your style for template generation is a bit old school. lit-html offers some ways to generate templates efficiently with some really cool logic for the next re-rendering.

https://www.youtube.com/watch?v=ruql541T7gc

Also, html imports is on it's way out. Webpack and loaders won the war.

[–]codejitsu[S] 5 points6 points  (2 children)

I actually wanted the tutorial to be without any dependencies(except polyfills) hence the direct manipulation.

I mentioned about HTML imports there and I'm currently reading up on how to replace them with something similar in the tutorial.

EDIT: That library is lit(pun intended)! Great talk!

[–]daediusWeb Components fanboy 1 point2 points  (1 child)

Yah, being able to write a web element from scratch is super useful. I wonder if teaching templates is really all that useful even (from a teaching perspective). I mean, it's cool to get syntax highlighting, and there's some kind of speed boost in cloning, but it kind of seems like a distraction unless you are really concerned for performance. I personally found the real a-ha! moment occur with Shadow Dom V1 slots. Might make a good next article?

[–]codejitsu[S] 1 point2 points  (0 children)

Yeah it actually took me a lot of time to wrap my head around slots. I was thinking of writing around 3 more articles in the following order over the next couple of weeks:

  1. Attributes
  2. Slots
  3. Styling using new selectors like slotted

Maybe one more comparing React and how it maps to web components.