Declarative ShadowDOM + Liquid

[t-kelly]

The only compiling that currently happens in Devkit is assembling CSS files into a single bundle based on the components that are in the build, and the CSS dependencies they declare. The primary reason for this is so that components that rely on the same shared CSS, e.g. button.css, isn't included and re-applied for each component. We don't want 2+ instances of button.css being applied to the page.

Ideally we could do something like we're doing with JS modules.

PostCSS can still have some uses, like polyfilling CSS nesting until its broadly adopted by users.

Things that might be of interest to explore further:

• Declarative Shadow DOM - has shipped to all browsers and is easy to polyfill until broader adoption
• CSS Modules

[t-kelly]

I've been playing around with Declarative Shadow DOM here to: archetype-themes/reference-components#20

a) Remove bundling from our CSS pipeline
b) Fully encapsulate components so that we are following the full web-component spec

What are the pros / cons of this approach?

[t-kelly]

Declarative Shadow DOM could be a better solution for slots + defaults?

declarative-shadow-liquid.mp4