A custom element’s tag sits outside its shadow root. That matters when a style rule moves into the shadow tree: a rule targeting the component tag no longer gives the host its intended layout. Use `:host` in the shadow tree’s CSS to style the shadow host instead. section 9.2
:host {
display: flex;
}
The `display: flex` rule restores the stepper’s host layout after its CSS moves into the shadow root. section 9.2
The selector also works in a component’s own template. For a workout layout, `:host { display: flex; }` lays out the host’s child elements, while an ID selector styles a divider inside the same shadow tree. The two selectors have different targets: the host and an internal element. section 9.3
Need one component to look different in different places? Put a class on its host and test it with `:host(...)`. An exercise component uses `:host(.cardio)` and `:host(.strength)` for different border colors. Classes can also signal where a component is being used: library and plan views apply different host classes, then style the host or its internal controls accordingly. section 9.4 section 10.1
Listing 10.8. Changing host-context selectors to host
:host(.library) #customize { #1
display: none;
}
:host(.library) #delete {
display: none;
}
:host(.plan) { #2
width: 100%;
height: 50px;
margin-bottom: 1px;
background-size: contain;
}
:host(.plan) input {
background-color: #505050;
padding: 5px;
color: white;
border: none;
}
These rules use classes on the exercise host to hide controls in the library view and change the host and input styles in the plan view. section 10.1
Shadow CSS blocks an outside selector from reaching an element inside the shadow tree, but it does not prevent every outside style from affecting what you see. In the text example, styling an ancestor still affects text inside the component. A `:host { all: initial; }` rule is shown as a way to reset style on the host. section 9.2
There is a compatibility catch if a component must run without Shadow DOM: `:host` is unavailable in that mode and can break the CSS in the Edge case described. One fallback renders a component-tag selector instead, and qualifies internal selectors with that tag. A class-qualified host rule such as `:host(.modal)` likewise needs a different selector when rendered without Shadow DOM. section 12.1
Listing 12.4. Switching between Shadow DOM and non-Shadow DOM selectors
render(opts) {
return `${this.css(opts.useShadowDOM)} #1
${this.html()}`;
},
createHostSelector(useshadow, host) { #2
if (useshadow) {
return ':host';
} else {
return host;
}
},
css(useShadowDOM) {
const comp = 'wcia-slider'; #3
return `<style>
${this.createHostSelector( #4
useShadowDOM, comp)} {
display: inline-block;
position: relative;
border-radius: var(--border-radius);
}
${this.createHostSelector(useShadowDOM, comp)} .bg-overlay {
width: 100%;
height: 100%;
position: absolute;
border
The template chooses `:host` when using Shadow DOM and the component tag when rendering without it. section 12.1
