6 ms·

I find this confusing. My understanding of web components is that they exist to encapsulate fragments of the DOM and use JavaScript to extend the functionality

I find this confusing. My understanding of web components is that they exist to encapsulate fragments of the DOM and use JavaScript to extend the functionality of elements. I don't understand how SSR could possibly help here, other than taking the first rendering pass out of the loop and generating standard HTML...which would then mean it's not a web component and just typical SSR. What am I missing?

CharlesW 3y ago
> …which would then mean it's not a web component and just typical SSR. SSR doesn't mean that you can't use web component frameworks, just that the framework must be able to both (1) produce and manipulate DOM in the browser as output, and (2) render the same components into HTML strings on the server. I believe frameworks with this capability are categorized as "isomorphic" frameworks. Enhance WASM essentially makes Web Components an isomorphic component framework, with a bonus (for some) of not having to use a server-side JavaScript runtime.
- danielvaughn 3y ago
  That makes sense, though the first paragraph of that page talks about how web components depend on client-side javascript. My confusion is that a web component by definition has to run client-side javascript. You're either (a) using javascript to port content from a template into your custom element, or (b) using javascript to attach a shadow dom to a custom element. I could be wrong about this, but I don't believe there's a way to send down a working web component from the server without accompanying client-side logic.
  - 1shooner 3y ago
    >I don't believe there's a way to send down a working web component from the server without accompanying client-side logic. Do you mean declarative shadow dom? That landed in FF 123, so I think it's now available on all major browsers.
    - niutech 3y ago
      Yes, this is Pure HTML Out-of-Order Streaming without JS and it works in every web browser: https://github.com/niutech/phooos https://github.com/niutech/phooos
- j45 3y ago
  Thank you for the explanation!
anentropic 3y ago
Yes it seems nuts I had a skim of the Lit SSR docs and they didn't really spell it out either My best guess at something that might make sense is if the idea is to pre-render something usable, but static, with SSR and then once that is delivered to the client it is able to upgrade itself back into an interactive client-side web component ? No idea if that's what these are trying to do though
- danielvaughn 3y ago
  that seems like the most plausible explanation, because it would at least prevent FOUC
  - nobleach 3y ago
    Unfortunately, it's not likely to help with FOUC. Flash of unstyled content happens when CSS isn't parsed and applied before the DOM is loaded and displayed. Even if one applies classes directly to DOM elements, if the stylesheet is still loading, you're going to see that flash. The only way to deal with it, is block rendering until the styles are parsed. (put it in the HEAD of the doc, etc)
    - danielvaughn 3y ago
      Ah yeah, you're right
    - throwitaway1123 3y ago
      You can drop an entire style tag into your shadow dom via the declarative shadow dom api, which avoids the FOUC.
      - math_dandy 3y ago
        This means that if you have the multiple instances of the same web component on the page, you need to duplicate the whole style tag in each (right?), which seems unwholesome.
deleted 3y ago
[deleted]

CharlesW 3y ago

> …which would then mean it's not a web component and just typical SSR. SSR doesn't mean that you can't use web component frameworks, just that the framework must be able to both (1) produce and manipulate DOM in the browser as output, and (2) render the same components into HTML strings on the server. I believe frameworks with this capability are categorized as "isomorphic" frameworks. Enhance WASM essentially makes Web Components an isomorphic component framework, with a bonus (for some) of not having to use a server-side JavaScript runtime.

danielvaughn 3y ago
That makes sense, though the first paragraph of that page talks about how web components depend on client-side javascript. My confusion is that a web component by definition has to run client-side javascript. You're either (a) using javascript to port content from a template into your custom element, or (b) using javascript to attach a shadow dom to a custom element. I could be wrong about this, but I don't believe there's a way to send down a working web component from the server without accompanying client-side logic.
- 1shooner 3y ago
  >I don't believe there's a way to send down a working web component from the server without accompanying client-side logic. Do you mean declarative shadow dom? That landed in FF 123, so I think it's now available on all major browsers.
  - niutech 3y ago
    Yes, this is Pure HTML Out-of-Order Streaming without JS and it works in every web browser: https://github.com/niutech/phooos https://github.com/niutech/phooos
j45 3y ago
Thank you for the explanation!

anentropic 3y ago

Yes it seems nuts I had a skim of the Lit SSR docs and they didn't really spell it out either My best guess at something that might make sense is if the idea is to pre-render something usable, but static, with SSR and then once that is delivered to the client it is able to upgrade itself back into an interactive client-side web component ? No idea if that's what these are trying to do though

danielvaughn 3y ago
that seems like the most plausible explanation, because it would at least prevent FOUC
- nobleach 3y ago
  Unfortunately, it's not likely to help with FOUC. Flash of unstyled content happens when CSS isn't parsed and applied before the DOM is loaded and displayed. Even if one applies classes directly to DOM elements, if the stylesheet is still loading, you're going to see that flash. The only way to deal with it, is block rendering until the styles are parsed. (put it in the HEAD of the doc, etc)
  - danielvaughn 3y ago
    Ah yeah, you're right
  - throwitaway1123 3y ago
    You can drop an entire style tag into your shadow dom via the declarative shadow dom api, which avoids the FOUC.
    - math_dandy 3y ago
      This means that if you have the multiple instances of the same web component on the page, you need to duplicate the whole style tag in each (right?), which seems unwholesome.

deleted 3y ago

[deleted]