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>

Styles local to the Shadow DOM

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

    <span slot="icon">😱</span>
    <span slot="name">Ladybenko</span>

😱 Ladybenko

Style cascading

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>

🦊 Firefox

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


Style encapsulation

Shadow DOM encapsulates styles so: