[WICG/webcomponents] How can a custom element detect when it is distributed, and what its composed parent is? (#941)

This is similar to https://github.com/WICG/webcomponents/issues/504. That question was based around the v0 API, but the question is still valid in the v1 API: there's no apparent way to do this, apart from the distributed parent having to be a custom element that can cooperates and notifies the distributed child, which is not possible with builtins (if a custom element is distributed via slot to a div element, that div element is not going to notify the distributed child that the div is the composed parent).

I already do this fine with cooperating elements. For example, this works:

```html
<script src="elements/x-foo.js"></script>
<body>
  <x-foo id="outside"></x-foo>
</body>
<script>
const root = document.body.attachShadow({mode: 'open'})
root.innerHTML = `
  <x-foo id="inside"><slot></slot></x-foo>
`
</script>
```

In that example, the `inside` x-foo element can observe its slot, and when `inside` sees that an x-foo element is distributed to it (the `outside` x-foo element in this case), the `inside` x-foo can notify the `outside` x-foo that the `inside` x-foo is the `outside` x-foo's composed parent (in the conceptual composed tree).

However, here is a use case where that isn't possible when `inside` is not a cooperating custom element. Suppose that `x-foo` is supposed to render custom graphics (with canvas for example) and the result should be based on the composed parent's size (this is something that CSS rendering already already does, CSS can render features of an element based on the element's composed parent's size, but now we're trying to implement our own rendering system).

Suppose we now have this example:

```html
<script src="elements/x-foo.js"></script>
<body>
  <x-foo id="outside"></x-foo>
</body>
<script>
const root = document.body.attachShadow({mode: 'open'})
root.innerHTML = `
  <div><slot></slot></div>
`
</script>
```

In that example the `x-foo` will be distributed to the div element. However, there's no way for the x-foo to know that it was distributed, or to which node it was distributed to, therefore the x-foo can not know what its composed parent is, and can therefore not know what the composed parent size is for its canvas rendering.

This is solvable if we do something hacky: we could make a loop (f.e. using `requestAnimationFrame`) in the x-foo implementation to continually check what the composed parent is, but this is obviously not ideal (it needlessly uses device battery, for example). Each time we poll, we can check `outside.assignedSlot. ... .asignedSlot.parentElement`. There's just not way to know when `outside.assignedSlot` has changed, therefore also no way to check for `outside.assignedSlot. ... .assignedSlot` to find the final composed parent, apart from polling or other hacks.

With some imagination, another complicated way of doing this could be to monkey patch `attachShadow`, and use `MutationObserver` in all trees to detect slots and notify the `x-foo` of its composed parent (or just the parent size).

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

Received on Friday, 10 September 2021 01:43:40 UTC