3 ms·

This article is trash. In retrospect it was a huge waste to coin the term "web component", by doing so the expectation is that web components eliminate all need

by Touche 10y ago

This article is trash. In retrospect it was a huge waste to coin the term "web component", by doing so the expectation is that web components eliminate all need for 3rd party JS libraries, which as the article points out, they don't. Instead "web components" is a set of low-level libraries that provide bits and pieces of stuff needed to make components. The article makes the usual criticism that web components doesn't have a databinding spec. It's true, it's a short coming. But the lack of a databinding spec doesn't make Shadow DOM any less useful. The two are unrelated. The author really likes JSX, but didn't bother to google "jsx web components"; if he had he might have come across this: https://skatejs.gitbooks.io/skatejs/content/ https://skatejs.gitbooks.io/skatejs/content/ There are some real things to criticize about web components. Shadow DOM makes it hard to theme your app. Custom elements has some warts in regards to the way that some events are composed. But the article doesnt make these criticisms.

floatboth 10y ago
Yep, the criticisms are just bad. "Attributes are strings", seriously? Uh, DOM elements in the browser have these things called JavaScript attributes… > Shadow DOM makes it hard to theme your app. Polymer uses CSS custom properties for this and it's not even hard, it's pretty cool, it's like you're making a CSS API for theming <your-element>.
- jakelazaroff 10y ago
  > Uh, DOM elements in the browser have these things called JavaScript attributes… Could you please link to a reference? I've never heard of JavaScript attributes and I can't find any reference on MDN.
  - e111077 10y ago
    I think that person is talking about the HTMLElement interface is essentially a JS object and how you can set properties on it. e.g. element.foo = 123; vs element.setAttribute('foo', '123');
    - floatboth 10y ago
      Exactly. I accidentally wrote "attributes" instead of "properties" :D
joeax 10y ago
My takeaway is that web components are purposefully low-level (as specs out of the W3 usually are). It doesn't have a databinding spec because it's not supposed to. That's why libraries like Polymer emerged, to make the features more streamlined to use. The apples-oranges comparison from the article is similar to comparing jQuery to vanilla DOM.
greenyouse 10y ago
Yeah, the author seems a little crazy about web components being approved. React and JSX are still good and they're not instantly disappearing or anything. > Shadow DOM makes it hard to theme your app The styling is a little different from normal but not too bad after getting the hang of it. There's usually a few components for colors, fonts, and common app styles (see paper-styles [1]). A few other components can provide CSS helper classes (e.g. Polymer's spin on flexbox [2]). CSS properties make tweaking component styles pretty easy, which makes the components more reusable. There are probably other styling tricks that'll pop up over time too. (you don't have to use Polymer, I picked it because it's what I'm most familiar with) [1] https://www.webcomponents.org/element/PolymerElements/paper-styles https://www.webcomponents.org/element/PolymerElements/paper-... [2] https://www.webcomponents.org/element/PolymerElements/iron-flex-layout https://www.webcomponents.org/element/PolymerElements/iron-f...

by Touche 10y ago

floatboth 10y ago

Yep, the criticisms are just bad. "Attributes are strings", seriously? Uh, DOM elements in the browser have these things called JavaScript attributes… > Shadow DOM makes it hard to theme your app. Polymer uses CSS custom properties for this and it's not even hard, it's pretty cool, it's like you're making a CSS API for theming <your-element>.

jakelazaroff 10y ago
> Uh, DOM elements in the browser have these things called JavaScript attributes… Could you please link to a reference? I've never heard of JavaScript attributes and I can't find any reference on MDN.
- e111077 10y ago
  I think that person is talking about the HTMLElement interface is essentially a JS object and how you can set properties on it. e.g. element.foo = 123; vs element.setAttribute('foo', '123');
  - floatboth 10y ago
    Exactly. I accidentally wrote "attributes" instead of "properties" :D

joeax 10y ago

My takeaway is that web components are purposefully low-level (as specs out of the W3 usually are). It doesn't have a databinding spec because it's not supposed to. That's why libraries like Polymer emerged, to make the features more streamlined to use. The apples-oranges comparison from the article is similar to comparing jQuery to vanilla DOM.

greenyouse 10y ago

Yeah, the author seems a little crazy about web components being approved. React and JSX are still good and they're not instantly disappearing or anything. > Shadow DOM makes it hard to theme your app The styling is a little different from normal but not too bad after getting the hang of it. There's usually a few components for colors, fonts, and common app styles (see paper-styles [1]). A few other components can provide CSS helper classes (e.g. Polymer's spin on flexbox [2]). CSS properties make tweaking component styles pretty easy, which makes the components more reusable. There are probably other styling tricks that'll pop up over time too. (you don't have to use Polymer, I picked it because it's what I'm most familiar with) [1] https://www.webcomponents.org/element/PolymerElements/paper-styles https://www.webcomponents.org/element/PolymerElements/paper-... [2] https://www.webcomponents.org/element/PolymerElements/iron-flex-layout https://www.webcomponents.org/element/PolymerElements/iron-f...