Styling Options

Overview of various aspects related to styling web components with and without Shadow DOM.

Constructable Stylesheets

Constructable Stylesheets make it possible to apply shared CSS styles to multiple Shadow Roots easily.

Contextually-aware web components

Using CSS custom properties as “broadcast” variables to inform about changing background colors.

CSS resets and global styles in web components

Importing CSS in web components to make them work in any environment.

Does shadow DOM improve style performance?

Research on how style encapsulation can improve rendering performance.

Eschewing Shadow DOM

Shadow DOM has a very opinionated way of preventing styles being applied from the parent document.

Flash of Undefined Custom Elements (FOUCE)

Web components are defined and registered with JavaScript, which might cause a brief flash of unstyled HTML.

How Nordhealth uses Custom Properties in Web Components

The benefits of using Custom CSS Properties in design systems and component libraries.

Options for styling web components

Research on the different ways that a standalone web component can expose a styling API.

Shadow DOM styling

As a general rule, local styles work only inside the shadow tree, and document styles work outside of it.

Shadow roots and inheritance

I encountered a bit of a HTML/CSS oddity the other day, so I thought I’d share what I learnt.

Smart Styling Of Web Components

Web Components provide an excellent solution for state-based styling by reflecting properties to attributes.

Style scoping versus shadow DOM: which is fastest?

Shadow DOM comes out as the most consistently performant scoping option.

Styling a Web Component

Using a web component doesn’t mean the styles of it are entirely isolated.

Styling Components Using Shadow DOM

Different ways of styling components which are using shadow DOM.

The specificity of ::slotted() content

By using ::slotted() we can add styles, but these styles have lower specificity than global document styles.

Theming hooks: Using CSS variables to trick-out your web components

PatternFly Elements web components have a standard way of stacking variables and fallback values.

Thinking Through Styling Options for Web Components

Defining styles for a web component in a don’t-leak-out way, and less so a way to get global styles to leak in.

Using Tailwind CSS with web components and Shadow DOM in LitElement

With LitElement we found a good way to get the best of both worlds without having to disable ShadowDOM.

Using Tailwind v3 with Lit elements

Quite often I see people asking around the Lit community about how to use Tailwind inside their Lit elements.

Web Component Pseudo-Classes and Pseudo-Elements

CSS features to use from within the web component and from outside it.

Web Standards Meet User-Land: Using CSS-in-JS to Style Custom Elements

Using the shadow DOM is common when creating custom elements, but is not required.

Why is my Web Component inheriting styles?

Inheritable styles will be applied to both your Shadow and Light DOM.

Edit this page on GitHub