A shadow host is the page-DOM node that parents a shadow root and its shadow tree. In a custom element, the host is the component’s HTML tag, while the rendered internals remain inside a separate DOM. section 8.2
The host sits at the shadow boundary: selectors from the page do not normally reach into the shadow tree, but host styling uses the special :host selector inside the shadow root. section 9.2 section 8.2
Styling the host
A rule such as sample-component { display: flex; } is outside the shadow tree and does not style the component’s internal layout. Moving the rule inside the shadow root and writing :host { display: flex; } styles the host from within the component. section 9.2
Creating the host relationship
Calling this.attachShadow({ mode: 'open' }) attaches a shadow root to the custom-element instance. The element becomes the shadow host, and the root’s markup becomes its shadow tree. section 8.2
Listing 9.3. Using the Shadow DOM to protect our stepper component’s style
class SampleComponent extends HTMLElement {
connectedCallback() {
const root = #1
this.attachShadow({mode: 'open'});
root.innerHTML = `<button class="big-button">-</button>
<span class="increment-number">5</span>
<button class="big-button">+</button>
<style>
sample-component {
display: flex;
}
span { #2
font-size: 24px;
background-color: #770311;
color: white;
font-family: Helvetica;
display: inline-block;
padding: 11px;
border: none;
}
button {
border-radius: 0 50px 50px 0;
border: none;
width: 50px;
height: 50px;
font-size: 36px;
font-weight: bold;
background: none;
background-color: red;
color: white;
}
button:first-child {
border-radius: 50px 0 0 50px;
}
button:active {
background-color: #960000;
}
button:focus {
outline: thin dotted;
}
</style>`;
}
}
Inspect the stepper component’s shadow-root setup and the host-versus-internal styling boundary. section 9.2
