[w3c/webcomponents] [bug] Unable to build web components for use in an SVG context (#650)

Suppose I'm making a simple SVG game. I want to make custom elements with shadow roots that consist of SVG primitives (`<rect>`, `<circle>`, etc). The result would be like this:

```html
<svg>
  <redwood-tree position="10 20"></redwood-tree>
  <player-tank position="30 50"></player-tank>
  <enemy-tank position="50 100"></enemy-tank>
  <!-- ... etc ... -->
</svg>
```

where each one of those elements could be defined as

```js
customElements.define('player-tank', class extends SVGRectElement {
  constructor() {
    this.root = this.attachShadow({mode:'closed'})
    this.root.innerHTML = `<rect width="10" height="10"></rect>`
    // ... some more code to map `position` attribute to `x/y` attributes ...
  }
})
```

Demo (nothing happens): https://jsfiddle.net/pem90k9a (but if you try to place the `player-tank` element outside of an SVG tree, then it will say `Uncaught TypeError: Illegal constructor` anyways since we've extended `SVGRectElement`.

Why is SVG not component-friendly?

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