3 ms·

I’m aware of web components, but I’ve never seen them in person (as a dev). Honestly I assumed they were dead. I never see them discussed or suggested to solve

by MBCook 3y ago

I’m aware of web components, but I’ve never seen them in person (as a dev). Honestly I assumed they were dead. I never see them discussed or suggested to solve problems. I see libraries of components/widgets offer versions for React and Vue and other things, never a web component version. No matter how good they may be they seem to have almost no mindshare. All major browsers appear to have supported autonomous custom elements since ~2019. That said based on this page this is a nonstarter at my company. If it doesn’t work easily React, it’s dead. The fact you can’t pass objects or functions would be a huge pain. Of course you can’t pass objects to traditional HTML elements either (outside react) or functions (basically) so I’m not sure why I’m surprised at that. But being able to do that is what makes using React components so easy. Having to add listeners sounds like going back to the battle days of early jquery to me. Additionally having poor accessibility support in 2023 is also a non-starter. We’re required to provide that in everything we do. It’s not web components’ fault if React doesn’t fit their model, or browsers have poor accessibility support when web components are involved. But it’s still a blocker. I can think of a at least one thing we do that being able to ship it as a web component would be very useful for. But we need to be able to pass objects in and out, which I guess would require marshaling and unmarshalling JSON. And that destroys ease of use. Others have already mentioned the bundler problem. Unfortunately the tone of this piece kind of reads as “come on, they’re not that bad, really“ instead of the cheerleading piece I was expecting. It had to mention a number of big caveats up front. I’m glad it did to provide an accurate picture. But unfortunately I think it actually reinforced to me the exact feeling they were trying to argue against.

MobiusHorizons 3y ago
You should be able to pass objects or functions as properties (at least at the dom layer). I have not personally tried it with react, but I know angular supports this.
- MBCook 3y ago
  Seems it doesn’t work in React, everything is sent as a string. There was a link in the article that shows how well web components work with various frameworks. https://custom-elements-everywhere.com/ https://custom-elements-everywhere.com/ You can see how React fares for itself.
  - troupo 3y ago
    Because React works with attributes, not properties, see discussion starting here, and referenced links: https://news.ycombinator.com/item?id=37246462 https://news.ycombinator.com/item?id=37246462
- teg4n_ 3y ago
  react passes everything as attributes for some reason which is the cause of the issue. I personally don’t understand why this hasn’t been fixed. Preact has managed to support properties which makes web components work as expected, you’d think it would be fairly easy for React as well.
  - troupo 3y ago
    > react passes everything as attributes for some reason Because that was their design choice: if you write attributes you pass them as attributes to the components > I personally don’t understand why this hasn’t been fixed. Because React is very popular and it's used everywhere in Facebook. You can't just change the behaviour without breaing a lot of stuff > Preact has managed to support properties > it would be fairly easy for React as well. Yup, they should "just" do it. Meanwhile, here's an overview of what's needed for that support: https://github.com/facebook/react/issues/11347 https://github.com/facebook/react/issues/11347 Preact uses Option 2 in the list. Other libraries go for either Option 1 or Option 3. React is going with option 2 in an experimental branch.
    - e12e 3y ago
      Thank you. For others that are still confused (why would you care about attributes anyway?!) - I found this enlightening (and a little sad wrt how convoluted Dom/browsers still are): https://javascript.info/dom-attributes-and-properties https://javascript.info/dom-attributes-and-properties In particular: > So, if an attribute is non-standard, there won’t be a DOM-property for it. Is there a way to access such attributes? > Sure. All attributes are accessible by using the following methods: > elem.hasAttribute(name) – checks for existence. > elem.getAttribute(name) – gets the value. > elem.setAttribute(name, value) – sets the value. > elem.removeAttribute(name) – removes the attribute. > These methods operate exactly with what’s written in HTML.
      - troupo 3y ago
        And web components complicate this further because they can expose both attributes and properties, and have code that reacts to change in both (`attributeChangedCallback` is a lifecycle method).
JodieBenitez 3y ago
> I see libraries of components/widgets offer versions for React and Vue and other things, never a web component version. In this regard, because I don't want to be tied to a JS framework (because most of the time I don't even use one) but I still want to have a cohesive set of UI components, I've been using Shoelace: https://shoelace.style https://shoelace.style You can use it any way you want, with a framework or not, in a SPA or not. It's a bit like using Bootstrap components, except you get much less markup cruft. Their own bullet points: - Works with all frameworks - Works with CDNs - Fully customizable with CSS - Includes a dark theme - Built with accessibility in mind - First-class React support - Built-in localization - Open source Also it looks great out of the box.
mst 3y ago
Visual Studio Code has a set of web components designed for writing custom extension UIs that fit with the core VSCode UI - https://github.com/microsoft/vscode-webview-ui-toolkit https://github.com/microsoft/vscode-webview-ui-toolkit - and explicitly mentions that being usable in multiple frameworks is one of the reasons for choosing web components as an implementation tech. It ships React components that act as adaptors for them out of the box (and has examples with other frameworks as well - see https://github.com/microsoft/vscode-webview-ui-toolkit-samples/tree/main/frameworks https://github.com/microsoft/vscode-webview-ui-toolkit-sampl...). Adobe maintains https://github.com/adobe/lit-mobx https://github.com/adobe/lit-mobx which is thee current usual way to write https://lit.dev https://lit.dev components that use https://mobx.js.org https://mobx.js.org for state management. So that's two noticeable Enterprise usages even if they don't seem to show up on HN much.

by MBCook 3y ago

MobiusHorizons 3y ago

You should be able to pass objects or functions as properties (at least at the dom layer). I have not personally tried it with react, but I know angular supports this.

MBCook 3y ago
Seems it doesn’t work in React, everything is sent as a string. There was a link in the article that shows how well web components work with various frameworks. https://custom-elements-everywhere.com/ https://custom-elements-everywhere.com/ You can see how React fares for itself.
- troupo 3y ago
  Because React works with attributes, not properties, see discussion starting here, and referenced links: https://news.ycombinator.com/item?id=37246462 https://news.ycombinator.com/item?id=37246462
teg4n_ 3y ago
react passes everything as attributes for some reason which is the cause of the issue. I personally don’t understand why this hasn’t been fixed. Preact has managed to support properties which makes web components work as expected, you’d think it would be fairly easy for React as well.
- troupo 3y ago
  > react passes everything as attributes for some reason Because that was their design choice: if you write attributes you pass them as attributes to the components > I personally don’t understand why this hasn’t been fixed. Because React is very popular and it's used everywhere in Facebook. You can't just change the behaviour without breaing a lot of stuff > Preact has managed to support properties > it would be fairly easy for React as well. Yup, they should "just" do it. Meanwhile, here's an overview of what's needed for that support: https://github.com/facebook/react/issues/11347 https://github.com/facebook/react/issues/11347 Preact uses Option 2 in the list. Other libraries go for either Option 1 or Option 3. React is going with option 2 in an experimental branch.
  - e12e 3y ago
    Thank you. For others that are still confused (why would you care about attributes anyway?!) - I found this enlightening (and a little sad wrt how convoluted Dom/browsers still are): https://javascript.info/dom-attributes-and-properties https://javascript.info/dom-attributes-and-properties In particular: > So, if an attribute is non-standard, there won’t be a DOM-property for it. Is there a way to access such attributes? > Sure. All attributes are accessible by using the following methods: > elem.hasAttribute(name) – checks for existence. > elem.getAttribute(name) – gets the value. > elem.setAttribute(name, value) – sets the value. > elem.removeAttribute(name) – removes the attribute. > These methods operate exactly with what’s written in HTML.
    - troupo 3y ago
      And web components complicate this further because they can expose both attributes and properties, and have code that reacts to change in both (`attributeChangedCallback` is a lifecycle method).

JodieBenitez 3y ago

> I see libraries of components/widgets offer versions for React and Vue and other things, never a web component version. In this regard, because I don't want to be tied to a JS framework (because most of the time I don't even use one) but I still want to have a cohesive set of UI components, I've been using Shoelace: https://shoelace.style https://shoelace.style You can use it any way you want, with a framework or not, in a SPA or not. It's a bit like using Bootstrap components, except you get much less markup cruft. Their own bullet points: - Works with all frameworks - Works with CDNs - Fully customizable with CSS - Includes a dark theme - Built with accessibility in mind - First-class React support - Built-in localization - Open source Also it looks great out of the box.

mst 3y ago

Visual Studio Code has a set of web components designed for writing custom extension UIs that fit with the core VSCode UI - https://github.com/microsoft/vscode-webview-ui-toolkit https://github.com/microsoft/vscode-webview-ui-toolkit - and explicitly mentions that being usable in multiple frameworks is one of the reasons for choosing web components as an implementation tech. It ships React components that act as adaptors for them out of the box (and has examples with other frameworks as well - see https://github.com/microsoft/vscode-webview-ui-toolkit-samples/tree/main/frameworks https://github.com/microsoft/vscode-webview-ui-toolkit-sampl...). Adobe maintains https://github.com/adobe/lit-mobx https://github.com/adobe/lit-mobx which is thee current usual way to write https://lit.dev https://lit.dev components that use https://mobx.js.org https://mobx.js.org for state management. So that's two noticeable Enterprise usages even if they don't seem to show up on HN much.