問題タブ [lit-element]

私は LitElement で遊んでいて、いくつかの単純なカスタム要素を作成しようとしています。

これは私の app.js です:

そして、これは私が作ったフォームです：

ただし、「送信」を押すと、入力からのデータのみjust_inputが送信され、カスタム入力からは送信されません。

カスタム入力値が送信されないのはなぜですか?

アプリケーションに @polymer/lit-element を使用していますnpm install 。最近、次のエラーが発生しました

node_modules を確認したところ、@polymer フォルダから lit-element フォルダが削除されていました。@polymer/lit-element を取り戻す方法はありますか? (アプリケーション全体を lit-element に移行する必要があるという点は別として、これは退屈に聞こえます)

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

しかし、<slot>にある は<svg>、指定された 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>用途

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