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.
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.