It’s just the Shadow DOM, because it doesn’t serialise (which is roughly demonstrated thus: if you take document.documentElement.outerHTML it won’t include any of the shadow roots, and there’s nothing you can do in a .html file to produce a shadow root without adding JavaScript to insert it).

So if you have a component looking like this in your dev tools:

  <sl-emoticon which="smile">
    #shadow-root (open)
      :-)
  </sl-emoticon>

Its HTML serialisation will still be <sl-emoticon which="smile"></sl-emoticon>, never with a :-).

Look, there are ways around this lack of serialisation of shadow roots; the examples in https://github.com/skatejs/ssr succinctly show early experiments in the field, where it serialises the shadow root as an element, which it then turns into a shadow root with an inline script—but if the JavaScript doesn’t run, that won’t work and you’ll be left with a weirdly broken element, so I disqualify it and say “Shadow DOM is incompatible with SSR”.

But for Web Components in general, there’s nothing stopping you serialising them with their light DOM, though if your component goes adding children to itself when or after you connect it you might need your connectedCallback to detect if this has effectively already happened (on the server side), and wire things up instead of changing its children. This process (wiring a JS-side component tree to an already-existing DOM, rather than rendering from scratch) is known as rehydration and applies to more than just Web Components.

Some of this stuff is bleeding edge and not every possible use case has been addressed. Web components bring a valuable contribution to what browsers are capable of, and everything will catch up in time. For example, there's already talk about a declarative shadow DOM [1].

Hmm, this all sounds... complicated. Incompatibility with SSR is a deal-breaker for me (I mainly work with ASP.NET Core), so unfortunately I don't think this is for me afterall.

You can do that, I render web components with python. Treat them as black-box custom HTML tags in your server side template.