Styles and Web Components

Style applied to host element

.host {
    padding: 0.5rem 1rem;
    box-shadow: 0 0 0.3rem rgba(0, 0, 0, 0.25);
}

<x-nametag class="host"></x-nametag>

We can set custom styles for the shadow DOM with a <style> tag inside the shadow root:

<x-fancy-nametag>
    <span slot="icon">😱</span>
    <span slot="name">Ladybenko</span>
</x-fancy-nametag>

😱 Ladybenko

Note em inherited properties go through the shadow DOM:

<x-fancy-nametag style="font-size:2em; color: orangered">
    <span slot="icon">🦊</span>
    <span slot="name">Firefox</span>
</x-fancy-nametag>

🦊 Firefox

This can be seen in the Inspector (look for Inherited from x-user-styled in the Rules panel):

screenshot

Shadow DOM encapsulates styles so:

CSS rules defined inside the Shadow DOM don't leak outside
We can't target Shadow DOM elements with CSS selectors that are not defined in the Shadow DOM (only inherited properties go through).