What is the usefulness of :host, :host() and :host-context()

Question

What is the usefulness of pseudo classes :host, :host() and :host-context()? If possible with some practical example

Answer 1

The pseudo-classes :host, :host() and :host-context() are part of the specification CSS Scoping Module Level 1, which are used as selectors of elements defined within the shadow gift.

As a result, they only work within the DOM shadow. So an example custom element will be used to create a shadow gift, and demonstrate the use of these selectors:

class Guilhermento extends HTMLElement {
  constructor() {
    super();
    let style = document.createElement('style');
    let span = document.createElement('span');
    span.textContent = 'sou filho do';

    const shadowRoot = this.attachShadow({
      mode: 'open'
    });
    shadowRoot.appendChild(style);
    shadowRoot.appendChild(span);

    style.textContent = `
      span:hover {
        text-decoration: underline;
      } 

      :host-context(div):after {
        content: "  div";
      }

      :host-context(span):after {
        content: "  span"; 
      }

      :host-context(div,span) {
        color: blue;
      }

      :host-context(.mudacor){ 
        color: green;
      }

      :host(.mudacor) { 
        color : red; 
      }

      :host {
        background: rgba(0, 0, 0, 0.1); 
      }
    `;
  }
}

window.customElements.define('gui-lher-me', Guilhermento);

<div>
  <gui-lher-me></gui-lher-me> azul
</div>

<div class="mudacor">
  <gui-lher-me></gui-lher-me> verde
</div>

<span>
  <gui-lher-me></gui-lher-me> azul
</span>

<p>
  <gui-lher-me class="mudacor"></gui-lher-me> vermelho
</p>

The selector :host, selects the root node of the shadow DOM, which in this case can be represented by <gui-lher-me>. In the example he is responsible for changing the background color.

The selector :host(), selects the root node of the DOM shadow, which meets the specified requirements. In the example it is responsible for changing the color of the text to red.

The selector :host-context(), selects the root node of the DOM shadow that has the parent element, which meets the specified requirements. In the example it is responsible for changing the color of the text to blue or green, and add additional texts.

NOTE: The specification is a little more complicated than I explained earlier. The root node of the DOM shadow is called in the host node specification, which is the root node after the browser (browser) injects the DOM shadow into the custom element within the document DOM (i.e., after the DOM shadow is merged with Document DOM).

What is the usefulness of pseudo classes... ?

Answer: Facilitates the definition of rules that affect shadow DOM elements. Mainly rules that depend on parent & child relationship.