Encapsulation for imported stylesheets

[kyleoliveiro]

To document your application properly, you need to include its styles and scripts.

Presumably, most stylesheets are going to have some sort of reset or base styles. Currently, styles from imported stylesheets are being applied to the Catalog app itself.

For example, consider a stylesheet that styles base ul elements using a :before pseudo-element. Importing this stylesheet causes the Catalog navigation in the sidebar to become styled as well, which is not ideal. What's the best approach to tackle this? Perhaps the Catalog "viewer" should become a web component so that external styles do not bleed in?

[jstcki]

Is this an actual issue you've encountered? If so, can you provide a more detailed description of what exactly was affected?

[kyleoliveiro]

Yes it is; So we are currently importing our stylesheet which contains all styles for our project (including resets and base styles). We have the following rule in our stylesheet:

ul li {
    list-style: none;
    padding-left: 20px;
    background: transparent url('../img/bullet.png') 0 10px no-repeat;
}

This causes the Catalog navigation to render like so:

[jstcki]

I'm not too familiar with Shadow DOM things … is it possible to encapsulate Catalog itself but let the global styles affect Specimens (i.e. components within the Shadow DOM)? Also, is there a way to implement this in a IE11-compatible way (which we will need to support for the time being)?

Another way this could work is if Catalog components each included their own resets. Not sure if that's reasonable though …

[kyleoliveiro]

Encapsulating Catalog itself is the right approach. Web Components are also supported in IE11 using the webcomponents.js polyfill.

[jstcki]

If I understand correctly, the polyfill doesn't prevent document styles from leaking into the "shadow" DOM https://github.com/webcomponents/shadycss#document-level-styling-is-not-scoped-by-default

[jstcki]

I tried to fix a few of these issues directly in #446 by writing more specific styles and adding explicit rules for things that I've seen in global stylesheets but are not wanted here. But as mentioned there, it's not a complete fix. I don't have a solution but here's where I'm at – maybe someone else wants to pick up from here and try to solve this:

Obviously, the proper solution would be encapsulate styles with Shadow DOM but I haven't had time to look into that too deeply and I have the feeling that the polyfilled approaches have disadvantages like FOUC (flash of unstyled content), the fact that a polyfill is needed and that the polyfill doesn't seem to encapsulate from global styles well enough (if I interpret the ShadyCSS caveats correctly).

I have experimented with using all: unset and all: initial as a simple way to undo unwanded styles but for some reason it didn't really work reliably, at least not how I expected it to. This probably has to do with the order in which styles are loaded/applied but I'm not 100% sure.

Another solution would be to include a full reset on each element (similar to what all: initial would do) but I don't know if that would work better than all: initial besides being IE-compatible. It would also generate a lot of styles which isn't that big of a problem because they're generated dynamically anyway. Not sure about rendering performance and browser issues though.