Webcomponents: [question] Pourquoi sommes-nous incapables de construire des composants Web à partir d'éléments SVG ?

Supposons que je crée un simple jeu SVG. Je souhaite créer des éléments personnalisés avec des racines fantômes constituées de primitives SVG ( <rect> , <circle> , etc.). Le résultat serait comme ceci :

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

où chacun de ces éléments pourrait être défini comme

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 ...
  }
})

Démo (rien ne se passe): https://jsfiddle.net/pem90k9a (mais si vous essayez de placer l'élément player-tank en dehors d'un arbre SVG, alors il dira Uncaught TypeError: Illegal constructor toute façon puisque nous ' J'ai prolongé SVGRectElement .

Pourquoi SVG n'est-il pas compatible avec les composants ?