javascript - スロットとしての LitElement SVG の子

Question

SVG 要素でラップされた単一のスロットで Lit-Element を使用しようとしています。

しかし、<slot>にある は<svg>、指定された SVG 要素のレンダリングを受け入れないようです。

カスタム コンポーネントで機能しないもの:

render() {
  return html`
  <svg>
    <slot><circle id="defaultCircle" cx=... cy=...></circle></slot>
  </svg>`
}

以下に例を示します: https://stackblitz.com/edit/wy6bhj?file=index.html

理由はありますか？代替案はありますか？

2019-02-18 コメント

Justin Fagnani は、a を使用し<foreignObject>て HTML (スロット) と SVG を混在させることを推奨しました。残念ながら、スロットではまだ SVG 要素であるため、これは機能しません。

2019-02-19 更新

render()関数内で表現する JavaScriptを使用this.childrenして、反復してテンプレートに子を追加するために使用しようとしています。現在、インスペクターを使用すると、DOM に正しく表示されますが、SVG 要素によって何もレンダリングされません。円がレンダリングされない理由がわかりません。

https://stackblitz.com/edit/wy6bhj-hne7wl?file=my-element.js

2019-02-19 UPADTE2

私は最終的に、最初に望んでいた方法でそれを行う方法がないことを理解しました. SVG コンテナーをそのまま渡すことにしました。

<my-element>
  <svg> ... </svg>
</my-element>

次に<my-element>用途

const SVG_CONTAINER = this.children[0]
const NODES = SVG_CONTAINERS.children

物事を計算する。そしてほら！