Shadowy Style demo site 🕶️

Scoped Styles

Outside shadowy-style

This is an example outside a shadowy-style element. The CSS for the page is affecting how it looks.

Inside shadowy-style

This is very similar markup inside a shadowy-style element with a custom stylesheet. The CSS from the shadowy-styleheet is affecting how it looks.

Inside shadowy-style

This is very similar markup inside a shadowy-style element with no custom stylesheet. Only specific root styles (e.g. font) are affecting how it looks.

These will follow you down the page, for testing purposes.

Outside

Inside

Scripting

But this button can still trigger scripts affecting elements inside and outside shadowy-style elements.

⚠️ Scripts are not encapsulated

This button (inside a shadowy-style) can also trigger the highlight function in the root document and other shadowy-style elements.

These tabs, although styled by local styles, still function thanks to the Bootstrap 5 script imported elsewhere.

Tab 1

Tab 2

👻 Boo!

Scoping large frameworks

This can be extended to include entire frameworks, or two different versions of a framework.

This element here is using Bootstrap 3 styles. But what if we want to embed a new element, taking advantage of Bootstrap 5?

This is an alert rendered with Bootstrap 5, inside a Bootstrap 3 page!

Ooh! Look, Bootstrap 5 tabs!

Tab 1

Tab 2

👻 Boo!