shadow dom, style encapsulation and (third-party) UI libraries

[tobi-or-not-tobi]

Hi Monica, thanks for the awesomeness you bring to the community – I like your fresh style 👍

I'm in favour of using custom properties and the way they bubble down into the shadow dom. While style rules in the shadow dom can leverage those custom properties, its limited and still requries a lot of local stle rules. The new specs around ::part and ::theme try to fix this, but I'm not confident that this is good enough, or at least I'd like to understand the consequences.

I'm envisioning an application with a lot of web components, but let's keep it simple for now. I'll have one web app with a DOM that hosts 2 web components:

• web component 1
• web component 2

Let's assume I'm using a link element in the shadow dom of both components. Both link should follow a certain style guide, and I would like to use an existing UI library to do that for me. Lets imagine bootstrap, using <a class="text-primary">my link</a>.

I'd add bootstrap to the style of the app for certain reasons, like maintenance, performance, versioning and perhaps a few other reasons. But this is not working, as the shadow dom of those web components block anything that is not bound to the body of the app.

Wondering what you would suggest in this case:

• forget about existing UI libraries since they're not build for web components and do not have a mechanism for reuse their library in this encapsulated world.
• import the UI library in each and every web component (ones the first web component have downloaded the fat library, it should be fetched from browser cache.
• import only those UI library components that are relevant to the web component
• don't use the shadow dom in such a project, since this encapsulation is not working. Instead use something like Angular's emulated encapsulation where global styles (including third party UI-libraries) do work, since they simply not use the shadow dom.
• anything else you can bring to the table?

To me it feels like the ::theme solution doesn't cut it here. It requires a change for UI libraries, while in this scenario I only would like to 'tell' the browser that certain selectors (i.e. text-primary), wherever they are, could be used as-is.

Thanks!

[notwaldorf]

My answer, to be honest, is "it depends".

• re 1: Using something that is built around global styles is going to work very poorly around something where the fundamental idea is not global styles. I'd try to find a way to translate the global styles to encapsulated elements -- maybe <text-primary-link> instead of <a class="text-primary">, or, more likely, translating the global styles to custom properties I can then use inside of those custom elements (--text-primary-color etc).
• between 2 and 3 I would obviously pick 3, since most of those styles seem like a waste (and again, while fine technically, kind of fundamentally against the benefit of having small, encapsulated elements)
• 3 works for some things, but if you're going to throw away shadow dom for all of your elements, you'll still have to do all the css-in-js (or whatever encapsulation approach you have) yourself, which in my book isn't super great.

This isn't a super satisfying answer, because it depends on the kind of app you have. Are you updating a giant app that uses bootstrap to use web components? Then, I would consider this on an element by element basis. Are you updating an existing design system and reusable components? Then I would do the work to convert these global styles to something that's reusable.

Does this make sense? Not super sure I make sense 😅

[notwaldorf]

(ill leave this open for now)

[tobi-or-not-tobi]

Thanks for your ideas. Regarding your comment "work very poorly around something where the fundamental idea is not global styles", this addresses my issue clearly. I'm totally with the fundamental idea, however with the example I gave I try to address a missing piece in the fundamental idea, which is, support for global styles. I like the idea of using customer properties, but this is not supported by big large frameworks such as bootstrap or material (all seem to wait for IE11 to be in end of live).

When using angular during app development, the view encapsulation is default to an emulated encapsulation, which basically means that the components are inheriting global styles, but any local styles will not effect other "web"components. This is not based on the shadow dom, which is an issue to me, as I'd like to allow other consumers of my app to provide native web components to further enrich the app.

Wondering if you know if this is seen as a common problem, or if its just me :)

[tobi-or-not-tobi]

For other readers, the questions where based on reading https://meowni.ca/posts/part-theme-explainer/ and https://meowni.ca/posts/styling-the-dome/.

[notwaldorf]

I've never used angular, so I can't say I've encountered that. In general, though, I'm not a super big fan of "fake" css encapsulation (and I grumbled about that a bit here)