Re: [csswg-drafts] [css-scoping-1] Dynamic changes of state and attributes referenced by :host-context rules are pretty hard to handle efficiently. (#1914)

I think `:host-context` is yet another API that we've not been able to attain quality patterns or metrics around due to a lack of implementation. You can't _really_ leverage it today unless you're shipping to Chrome only, otherwise the lengths that you would need to go to in order to support similar in Safari and Firefox would make it much more practical to use that same pattern in Chrome. In that way, maybe it is time to simply remove it.

However, in the intervening years, CSS at large has attained a componentization pattern that mimics this in the form of complex `.el:is(...)` selectors which amounts to the same functionality in a non-Custom Element context. In this way, I think the real question here is not "what `:host-context()` patterns would lead us to believe we shouldn't take this away?" and actually "why do we think that custom element users are not as deserving of the capabilities we've recently shipped cross browser to other developers via the `.el:is(...)` syntax?"

Thinking in this way, @prantlf's example might look like the following: https://codepen.io/Westbrook/pen/wvqWJrK
```
<e-h1>
  <template shadowroot="open">
    <style>
      :host {
        font-size: 3em;
        display: block;
      }
    </style>
    <slot></slot>
  </template>
  Heading 1
  <e-small>
     <template shadowroot="open">
       <style>
         :host {
           font-size: 0.75em;
           display: block;
         }
         :host(:is(e-h1 e-small)) {
           margin-top: -0.25em;
         }
       </style>
       <slot></slot>
    </template>
    Subheading
  </e-small>  
</e-h1>
```
As opposed to the similar no custom elements approach which is possible today via: https://codepen.io/Westbrook/pen/YzxWZjb
```
<style>
.e-small {
  display: block;
  font-size: 0.75em;
}

.e-small:is(.e-h1 .e-small, .e-h2 .e-small, .e-h3 .e-small) {
  margin-top: -0.25em;
}
<style>
<h1 class="e-h1">
    Heading 1
    <small class="e-small">
        Subheading
    </small>
</h1>
<h2 class="e-h2">
    Heading 2
    <small class="e-small">
        Subheading
    </small>
</h2>
<h3 class="e-h3">
    Heading 3
    <small class="e-small">
        Subheading
    </small>
</h2>
```

I'd really like to see `:host-context()` sanded out of the spec if it won't ever receive cross browser implementation, but the spec _should_ support custom elements developers at the same level as it would non-custom elements developers. A great way to do that would be to support common CSS practices directly on `:host` so that it no longer requires the special casing that `:host-context()` affords.

-- 
GitHub Notification of comment by Westbrook
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1914#issuecomment-946729079 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 19 October 2021 13:33:37 UTC