Shadow DOM plays an important role in wold of web components as they provide an easy way to encapsulate, buu they were created imperatively using JavaScript, with something like:
1 2 3 4 5 6 7 8 9 10 |
|
Well, this works fine for client-side only application, but has lot of challenges to express and build them on the server (SSR), that when declarative shadow comes into picture!
Declarative Shadow DOM (DSD) helps us to have Shadow DOM to the server with ease, the sample imperative example as above would look like:
1 2 3 4 5 6 |
|
Here is codesandbox:
P.S: chrome://flags/#enable-experimental-web-platform-features
should be enabled as of today to use this feature.