Re: [w3c/webcomponents] How can a custom element detect when it is transcluded into a shadow tree (slotchange)? (#504)

That doesn't work because the connected events and distribution events don't necessarily happen at the same time.

When we write the following

```html
    <div>
      <motor-scene id="scene">
        <motor-node id="node"></motor-node>
      </motor-scene>
    </div>
```

and it gets rendered, the `motor-node`'s `connectedCallback` is fired. At that moment in time, `assignedSlot` is null.

Suppose we add a shadow root to the `motor-scene`, containing:

```html      
#shadow-root
  <motor-node id="inner-node">
    <slot>
    </slot>
  </motor-node>
```

Then we get:

```html
  <div>
    <motor-scene id="scene">
      
      #shadow-root
        <motor-node id="inner-node">
          <slot>
            <!-- distributed motor-node -->
            <motor-node id="outer-node"></motor-node>
          </slot>
        </motor-node>

      <!-- original motor-node -->
      <motor-node id="outer-node"></motor-node>
    </motor-scene>
  </div>
```

At some point in time after adding the shadow root, `motor-node`'s `assignedSlot` will be set to the above `slot` element, but `motor-node`'s `connectedCallback` won't fire, so we can't rely on `connectedCallback` to know when the distribution happens.

With closed shadow trees, the value of `assignedSlot` remains `null` the whole time and we can't poll `assignedSlot` to discover when distribution has happened.

`distributedCallback` (or perhaps `assignedCallback` matching the v1 terms) could be an official mechanism that we could rely on in order to have such insight.

The main reason why I want such insight is that I want to make an API that's as easy to use as possible, and I don't just mean that the API is easy to use when documentation is followed, but that the API is easy to use because it will do a good job of teaching usage patterns to someone when they try the API by trial and error, and which will do a really good job of catching invalid use cases in applications where life and death could possibly even be at hand.

Something like `assignedCallback` (or some other official mechanism that makes it easy for an element to know it's been distributed) would make it easier for a library or framework author to write an HTML API that can detect more use cases (and react to them).

---
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/504#issuecomment-230073228