Native web component: style host differently depending on slotted content

Question

Say I have a native web component with an HTML template like so:

<wc-grid>
    <slot></slot>
</wc-grid>

Now I have the following two use cases (one with a text input the other with a radio):

<wc-grid>  <input type="text">   </wc-grid>
<wc-grid>  <input type="radio">  </wc-grid>

Is it possible to style the <wc-grid> differently depending on when whether it contains a text or radio type input?

e.g. If has() was around it would be something like this: (trying to change whether the grid is vertical or horizontal depending on the widget inside of it):

:host:has(> input[type="text"])  { flex-direction: row; }
:host:has(> input[type="radio"]) { flex-direction: column; }

Research has lead me to learn about :has(), but that has not landed yet. And as far as I can tell :host-context would not help either as it looks up, not down, besides its poor support.

Easiest way, at the moment, is have some script set an attribute on ``.getRootNode().host``. And I presume you have read the (very) long read on ``:slotted`` https://stackoverflow.com/questions/61626493/slotted-css-selector-for-nested-children-in-shadowdom-slot/61631668#61631668 — Danny '365CSI' Engelman, Jan 19 '22 at 19:28

score 1 · Answer 1 · answered Feb 07 '22 at 04:21

The easiest and cleanest implementation of such a problem I can solve by using a named slot.

example of web component

  class MyComp extends HTMLElement {
    constructor() {
      super();
      const shadow = this.attachShadow({ mode: 'open' });
      this.shadowRoot.innerHTML = `
      <style>
        .flex {
          display: flex;
          justify-content: space-between;
        }
        .row {
          flex-direction: row;
          background: red;
        }
        .column {
          flex-direction: column;
          background: green;
        }
      </style>
      <div>
        <div class="flex row"><slot name="row"></slot></div>
        <div class="flex column"><slot name="column"></slot></div>
      </div>`;
    }
  }

  customElements.define('my-comp', MyComp);

usage in HTML

    <my-comp>
        <div slot="row">This is row 1</div>
        <div slot="row">this is row 2</div>
        <div slot="row">This is row 3</div>
    </my-comp>
    <my-comp>
        <div slot="column">This is colum 1</div>
        <div slot="column">This is colum 2</div>
        <div slot="column">This is colum 3</div>
    </my-comp>

example screenshot

Another good way to have a attribute which can add respective classes to root elements to modify css based on it

Native web component: style host differently depending on slotted content

1 Answers1