Re: [w3c/webcomponents] Method for detecting finally-distributed nodes. (#611)

@hayatoito 

> Please use open shadow trees if this design goal does not meet requirements.

My library does not use ShadowDOM at the moment. It is not I who is making design decision on whether to use "open" or "closed" shadow trees. The end user of my library (or of any of the libraries mentioned above) can take any of those libraries and decide to use open or closed trees to distribute the elements as the end-user sees fit.

_I can not possibly know if the end user will use open or closed trees._

It would be great if you could solve the following challenge to experience what I mean:

Make three custom elements with the given attributes that will be used to render to a 2D canvas context:

1. `<x-scene width="" height="">`
1. `<x-transform x="" y="">`
1. `<x-circle radius="">`

Then write the following markup which should (approximately) render a circle at position `80,80` with radius `10` in a canvas that is created and placed as a sibling to the `x-scene` element:

```html
<x-scene>
  <x-transform x="20" y="50">
    <x-transform x="60" y="30">
      <x-circle radius="10">
      </x-circle>
    </x-transform>
  </x-transform>
</x-scene>
```

Once that is working, then write this markup:

```html
<x-scene>
  <x-transform x="20" y="50">
    <x-circle radius="10">
    </x-circle>
  </x-transform>
</x-scene>
```

and then this JavaScript:

```js
var t = document.querySelector('x-transform')
var r = t.attachShadow({mode:'closed'})
r.innerHTML = `
  <x-transform x="60" y="30">
    <slot></slot>
  </x-transform>
`
```

The results should be the same, but the second example will distribute the circle into the second transform.

That shadow root example is simple though. It is easy to get that working just with `slot.assignedNodes({flatten:false})`: the shadow root's `<x-transform>` element can call `slot.assignedNodes()` on the slot in order to determine what to render to the canvas, simple.

Now, imagine we have two layers of shadow roots. Write the following markup,

```html
<x-scene>
  <x-circle radius="10">
  </x-circle>
</x-scene>
```

and the following javascript:

```js
var s = document.querySelector('x-scene')
var r = s.attachShadow({mode:'closed'})

r.innerHTML = `
  <x-transform x="20" y="50">
    <slot></slot>
  </x-transform>
`

var t = r.querySelector('x-transform')
r = t.attachShadow({mode:'closed'})

r.innerHTML = `
  <x-transform x="60" y="30">
    <slot></slot>
  </x-transform>
```

Now, the `slot` element of the first shadow root gets automatically distributed to the `slot` of the second shadow root. This means that the `x-circle` element in the root tree gets "ultimately-distributed" (not assigned) to the slot in the second shadow tree.

The `x-transform` element in the first shadow tree _cannot simply call `slot.assignedNodes()` anymore because it will be false: the `x-circle` is not being rendered there._

What is your solution to that, so that the `x-circle` is recognized to be rendered relative to the `x-transform` element in the second shadow tree?

-- 
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/611#issuecomment-263208461