問題タブ [custom-element]

グーグルで検索しても意外と見つからない…

カスタム要素 (W3C 仕様の Web コンポーネント セットなど) の名前に Unicode を含めることはできますか?

このHTML 5 カスタム要素名? は、カスタム要素名は ASCII 文字で始まり、ハイフンとその他の文字を含む必要があると述べています。それはユニコードを意味しますか？

とりわけ、コア入力と紙のボタンがあるカスタム要素があります。要素を作成すると入力が無効になり、ボタンをタップしたときに有効にしたい。いくつかの方法を試しましたが、入力の属性にアクセスできません。

何を書けばいいの

編集

そのため、ユーザー名の入力要素が繰り返しテンプレート内にあることが問題であることがわかりました。これは、私がやろうとしていたことにとって悪いことです。現在、単一の json オブジェクトを要素にバインドしようとしていますが、これまでのところ運がありません。

私が今持っているもの：

私のインデックスページで：

私の要素のページで：

私のJSONは次のようになります。

エンティティ属性を変更した後、何らかの形で要素を「更新」する必要があると思いますか?

これが動作を示すjsfiddleです。

optionShadow DOM の挿入ポイントに要素を取り込めると思っていましたが、がselect空なので、それが起こっているとは思いません。いずれにせよ、Chrome インスペクターは挿入ポイントにはあまり役に立ちませんが、option要素を に挿入する以外のことなど、他の挿入ポイント操作を行うときにブラウザーが機能することを確認しましたselect。

次のようにカスタム要素を定義します。

#guyテンプレートは次のとおりです。

使用法は次のとおりです。

繰り返しますが、これらのoption要素が Shadow DOM に挿入されることを期待selectしていましたが、ドロップダウンを開いたときに表示されません。

からの「派生」が問題なのかもしれないと思ったのですが、どちらもHTMLElement実装してもうまくいきませんHTMLSelectElement。

また、テンプレートを使用せずに を直接変更して実験しましたshadowが、それもうまくいきませんでした。innerHTML

私の現在の考えでは、要素はs、s、またはs のoption外では有効ではなく、ブラウザーは何らかの適合を投げかけていますが、それについては教えてくれません。selectdatalistoptgroup

私は途方に暮れており、おそらくmy の要素にitem変換される2番目の要素プレースホルダーを作成することでこれを回避します ああ。optioncreatedCallback

私はシャドウ ルートを使用してアプリをshadow.children[i].addEventListener('click', fn);書いています。

カスタム要素から次のように呼び出します。

問題は、要素が呼び出されると関数が直接実行され、指定された要素の「クリック」アクションを「リッスン」するのを待たないことです。

それを修正する方法はありますか？