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

Specifically to my case, `motor-node` elements` can only be children of (or be distributed into) `motor-scene` or other `motor-node` elements, or an error is to be thrown. My code will need to detect when a `motor-node` is attached or distributed into something other than a `motor-node` or `motor-scene`.

I see how to detect the following two cases and throw errors for them:

1. `motor-node` can easily detect when child `motor-node` element is attached with MutationObserver
1. `motor-node` can detect distributed `motor-node`s with `slotchange`.

But I am having trouble figuring out how to deal with this scenario:

1. `motor-node` is appended to something other than `motor-node`. The child can easily observe when this happens. f.e. when `motor-node` is appended to a `div` there should be an error. But, the problem is: if the `div` has a ShadowDOM root (now or in the future) and the `motor-node` gets distributed into the div's inner tree into a `slot` element of an inner `motor-node`, then that is fine and there shouldn't be an error thrown.
1. Furthermore, if a `motor-node` gets distributed into an inner tree and the slot-containing element is not a `motor-node` then there needs to be an error, and that case seems impossible to catch (with closed trees).

Basically, this is fine, and a parent `motor-node` can easily detect this:

```
  <motor-node> <!-- this is the "parent" -->
       |
       |
    <slot>
       |
       |
  <motor-node> <!-- this is the "child", detected by "parent" via slotchange -->
```

But, the following is wrong, and I would like to throw a helpful error to the end user so they can learn from it:

```
     <div> <!-- Error, not a motor-node element -->
       |
       |
    <slot>
       |
       |
  <motor-node>
```

@rniwa @hayatoito Any ideas how to deal with those two cases? Here's possibilities I think for each case:

1. The `motor-node` can use `setTimeout` if not appended directly to another `motor-node` (for example is childNode of a `div`), then after the timeout throw a warning if a connection has not yet been made via slotting. But, it's impossible to tell if a shadow root will be added later, so I think only a warning, not an error, can be given. Or maybe I can keep it simple and just throw a warning up front if parent isn't `motor-node` and no ShadowDOM exists, but if there is already a shadow DOM (please correct if wrong) then distribution should happen synchronously (including the parent `slotchange` event) in which case I'll be able to deferr to a future tick in order to detect if a connection was made by a parent or not (assuming the connection happened synchronously before in the `slotchange` event). I've opened https://github.com/w3c/webcomponents/issues/515 to ask about that specifically.
1. For this case, maybe there needs to be a [way for children to detect `slotchange` as well](https://github.com/w3c/webcomponents/issues/504), but for distributed Nodes to simply not be able to access `slot.parentNode` when the ShadowDOM is closed. Or maybe a `distributedCallback` could be added to the spec, where the passed argument is the `slot` element, and `slot.parentNode` and slot.parentElement` are null in that case (or similar), otherwise they can be used to look into the Shadow tree if it is `open`.

---
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-224104707