[w3c/webcomponents] idea: declarative markup for manipulating a shadow root's host (#876)

Some custom elements use tools like ``` html`` ``` template tag functions, or JSX, or etc, internally to make declarative modification to their internal shadow DOM.

But when it comes to modifying things on the host element, the element has to contain code like

```
if (this.authenticating) this.classList.add('authenticating')
else this.classList.remove('authenticating')
```

(ignore that this modifies the external state, and that the `:--state` feature will be better for this)

It might be convenient if instead the element implementation could achieve this declaratively, within the same markup that it already has.

So, similar to how CSS has a `:host` selector to target the host from the ShadowRoot, the DOM could have a `<host>` element to manipulate a ShadowRoot's host from markup.

With this feature, the custom element implementation could remove the above imperative code, and write something like the following (assume some JSX implementation takes care of the reactive updates):

```jsx
@reactive authenticating = false

constructor() {
  super()
  this.attachShadow({mode: 'open'}).append(
    <host class={this.authenticating ? "authenticating" : ""}>
      <div>This content was already defined before.</div>
    </host>
  )

  // later something changes the value of this.authenticating
}
```

The `<host>` element would mirror any attributes to `this` instance's attributes. It renders as if with a permanent `display: contents` CSS property, and it must be a direct child of the ShadowRoot (or else it does nothing, or perhaps an error is thrown), and there can be only one (or else it uses the first one, or perhaps an error is thrown).

I'm not sure if it is worth it. I thought I'd jot this idea down when it occurred to me. 

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/webcomponents/issues/876