[w3c/webcomponents] Extending from component with shadow dom seems difficult. (#643)

Suppose a `SomeComponent` component defines a `<some-component>` custom element, and it makes it's own shadow dom to hide internals, and accepts children (maybe the component is a layout component that distributes children into the internal layout).

Then another author wants to `class NewComponent extends SomeComponent {}`. 

It seems difficult for extending author to extend SomeComponent and perhaps modify internals, or something.

---

Or suppose `SomeComponent` from `some-library` has no shadow DOM at first (it is not a layout component), and another author wants to extend `SomeComponent` to add a shadow dom and make a layout using `SomeComponent`. Perhaps `SomeComponent` is a drawing element (like a-frame's webgl drawing elements), and depending on what you put as children inside the `<some-component>` element something will be rendered.

The extending author is able to extend SomeComponent to make a new element that can accept children and distribute them into the tree. The distributed children, let's say, are also drawing elements (like a-frame's).

Now, suppose the original author of `SomeComponent` decides that in order to render something properly, it needs to use a shadow dom. For example, the original author of `SomeComponent` might decide to use shadow dom in order to hide the fact that a canvas is used for rendering, so that the end user (or other app code) only sees HTML elements in the DOM, not the internal canvas used for rendering.

This suddenly breaks the extending author's new component, without an obvious way to fix the problem.

A possible workaround can be for the extending author to make a wrapping element with a new shadow dom, place the original `<some-component>` inside the new outer element's shadow dom, with a slot inside of the some-component, then distribute children into the some-component so that some-component can further distribute as needed.

But, this might not work in all cases.

---

It seems like shadow dom components may be difficult to extend. Any thoughts on patterns that you may have already encountered?

-- 
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/643