Universal: Support shadow DOM and custom elements

[calebdwilliams]

🚀 Feature request

What modules are relevant for this feature request?

• [ ] aspnetcore-engine
• [ ] builders
• [x] common
• [ ] express-engine
• [ ] hapi-engine
• [ ] module-map-ngfactory-loader

Description

A clear and concise description of the problem or missing capability...
Angular Universal should be able to handle shadow DOM v1 and custom elements as part of it's SSR capabilities. This is probably going to be related to domino #160, shouldn't necessarily be.

Describe the solution you'd like

If you have a solution in mind, please describe it.
Either Angular Universal works with domino to support this use case or an avenue is created to use something like @skate/ssr or jsdom both of which support SSR on custom elements and shadow DOM v1.

This should work out of the box as ViewEncapsulation.ShadowDOM is a built-in feature of Angular and this package cannot be said to be complete without supporting that.

Describe alternatives you've considered

Have you considered any alternative solutions or workarounds?
The only other option is to abandon Angular Universal as a solution in this problem space.

[lijumathews]

This is a huge concern for us too

[CaerusKaru]

There is no way to serialize the shadow DOM on the server, so really this is just a request for support for Custom Elements on the server. There currently exists several shims to enable this. We're in the middle of evaluating a shift in DOM providers on the server, and this will definitely be a consideration in that.

[calebdwilliams]

Like I said, both SkateSSR and jsdom have the ability to work with shadow DOM. Why wouldn’t those approaches work in this instance?

[CaerusKaru]

There is no way to represent shadow DOM in HTML markup, I don’t care what you think other frameworks are doing, there just isn’t a way to do it. This means that likely those frameworks simply no-op when serializing on the server, whereas Angular Universal throws an error due to lack of support. We do not use jsdom because it is much, much slower than our current provider.

Keep in mind that you are of course totally welcome to create your own SSR solution for Angular. For instance, Scully uses Puppeteer to render their apps, not Universal.

[PatrickJS]

it is true shadow dom isn't supported on the server for any framework but this is only because of the design of shadow dom (not even Puppeteer works). The way that everyone gets around this is to convert the shadow dom into light dom before rendering to a string. SkateSSR made a PR to support this in domino but it looks like the PR was never merged 3 years ago
https://github.com/fgnass/domino/pull/96

[vinothbabu]

@PatrickJS Is there any way we can support custom-elements in universal? Do we have any hacks or alternate solution to overcome this ?

[calebdwilliams]

Following up here to make sure this doesn't become stale. Is this anywhere on the roadmap?