Re: [whatwg/dom] Declarative Shadow DOM (#510)

What we're proposing is two distinct modes:

1. Shadow DOM *and* CSS encapsulation via `attachShadow()`
2. Only CSS encapsulation via the `composed` attribute (maybe also works via `attachShadow({ composed: true })` but that can be worked out later. Declarative design first IMO).

To concretely illustrate this, React is a good example.

```js
class Hello extends Component {
  static props = {
    name: string
  }
  static defaultProps = {
    name: 'World'
  }
  render () => (
    <div composed>
      <style>
        /* Works on <div> */
        :host {}

        /* This now works because of <slot />! */
        ::slotted(*) {}

        /* Only works for top-level span, not the slotted one. */
        span { font-weight: bold; }
      </style>
      Hello,{' '}
      {/* This span would be affected... */}
      <span>
        <slot>
          {/* ...but not this one. */}
          <span>{ this.props.name }</span>
        </slot>
      </span>!
    </div>
  )
}
```

The idea here is a lot like the old `<style scoped />` form of encapsulation, but it differs because the full gamut of Shadow CSS works (`:host`, `::slotted()`, etc).

The `<slot />` element provides an encapsulation barrier that selectors cannot cross but that's it. The `assignedNodes()` method does not return anything because nothing is being projected. In this mode, DOM accessors are not encapsulated. However, to turn this into full Shadow DOM, one can call `attachShadow()` and the composed tree is reverse engineered:

1. The host receives a shadow root.
2. `childNodes` of slots are attached to the host, thus are projected.
3. Any content within a slot that has the `default` attribute (flagging for default content) is not attached to the host, and remains as default content.
4. For named slots, this is declared as normal and is thus projected as normal.

This is literally the algorithm we're employing for declarative shadow DOM at the moment. The thing that's nice about it is that it's backward compatible and it fits very closely with the current model for shadow roots. @bedeoverend did I miss anything in that list?

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/whatwg/dom/issues/510#issuecomment-329330184