:host selector

[crcn]

A bit different than :within selector, :host would be specific to host components - similar to the native web comonents spec. E.g:

<div component as="Cell">
  <div>
    <style>
      :host(:hover) {
         color: red;
      }
    </style>
    inner text
  </div>

</div>

☝🏻 This is a bit different than :within since :host would only apply to the component hosting this instance. :within on the other hand would take any parent that has the given selector.

However, this is a bit problematic when slicing up components. For example, suppose we sliced out the above component out a bit more:

  <div component as="Inner">
    <style>
      :host(:hover) {
         color: red;
      }
    </style>
    inner text
  </div>
<div component as="Cell">
  <Inner />
</div>

☝🏻 Here, :host would be applied to the Inner component instead of Cell. A bit problematic for developer flows where you start with raw HTML & then breaking the HTML into smaller subcomponents. The alternative to :host is a bit more resilient to this:

<div component as="Cell">
  <style>
      &:hover {
        .inner {
          color: red;
        }
      }
  </style>
  <div className="inner">
    inner text
  </div>

</div>

[crcn]

Need to be cognizant of recursive hosts