[WICG/webcomponents] Adding support for ShadowDOM features in SVG (#942)

I think at least this should be possible:

```html
<div>
 <svg>
  <rect x="120" width="100" height="100" rx="15" slot="content" />
 </svg>
</div>

<script>
 // User code //////////////////////////////////
 const div = document.querySelector('div')
 const rect = document.querySelector('rect')
 div.append(rect)

 // Web Component code /////////////////////////
 const root = div.attachShadow({mode: 'open'})
 root.innerHTML = /*html*/`
  <slot name="content"></slot>
  <svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg" fill="red">
    <rect width="100" height="100" />
  </svg>
 `
 const slot = root.querySelector('slot')
 const svg = root.querySelector('svg')
 svg.append(slot)
 
 console.log(rect instanceof SVGElement) // true
 console.log(rect.parentElement instanceof SVGElement) // false
 console.log(rect.parentElement instanceof HTMLElement) // true
</script>
```

[codepen example](https://codepen.io/trusktr/pen/a3a9c5582a7be8526d41c479af50792a)


The ability to compose like this would be nice. Non-web-component framework don't have this limitation when composing from a higher tree to a lower tree.


Is there a plan in place to support composition with SVG? 

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