問題タブ [web-component]

現在の Web コンポーネント仕様を使用してリストボックス ウィジェットを実装したいと考えています。さらに、結果のリストボックスは ARIA 標準に準拠する必要があります。リストボックス ウィジェットのインスタンス化は次のように簡単です。

クリーンさとカプセル化のために、他のすべてはシャドウ DOM でレンダリングする必要があります。このウィジェットを実装するために、2 つのカスタム要素が登録されています<x-listbox>。<x-option>のシャドウ DOM の最上位要素は、<x-listbox>アクセシビリティのためのおよび属性<div>を運ぶです (実装の詳細であるため、要素にこれらの属性は必要ありません)。role=listboxaria-activedescendent<x-listbox>

が機能するaria-activedescendentには、オプション要素に ID が必要です。要素に ID を直接配置する<x-option>ことは、次の 2 つの理由からうまくいきません。まず、リストボックス ウィジェットを使用するドキュメントの ID 名前空間を汚染します。第 2 に、さらに重要なことは、ID は Shadow 境界を越えて機能しない (これは Shadow DOM の目的の 1 つです)。そのため、オプションの ID は<div>witharia-activedescendent属性と同じ Shadow DOM に存在する必要があります。

これに対する解決策は<x-option>、シャドウ DOM 内のコンテンツとしてレンダリングされるそれぞれ<x-listbox>を別の<div>(そのシャドウ DOM に属する) で囲み、ID を配置できるようにすることです。

私の質問は次のとおりです:これは正しい方法ですか?カスタム要素とシャドウ DOM Web API を使用してこれを実装する方法は?

別の要素をクリックしたときに、Polymer 要素をどのようにインスタンス化できるのか疑問に思っています。Dock-iconからwindow-baseをインスタンス化する方法はありますか? （コードダウン）。すべての要素にあるコンストラクターを使用できますが、これがどのように機能するかわかりません。そのコンストラクターに変数を渡すにはどうすればよいですか。

関連する 2 つの要素のコード:

インスタンス化する必要があるポリマー要素

ありがとう

.contentネストされたへの JS アクセスを取得するにはどうすればよい<template>ですか?

<template>自分の要素 (外部ファイルからテンプレート コンテンツを取得する)を拡張しようとしていますが、ネイティブと同様の方法でimported-template実装したいと考えています。そうするために、私は単に試します<imported-content><content>

しかし、ネストされたテンプレートthis.contentが空であることが発生しました。

JSFiddleここ

バグなのか、設計上の問題なのか、それともテンプレート シムの制限なのかはわかりません。

間違ったライフサイクルコールバックでチェックしているのかもしれないと思ったので、MutationObserver ここでフィドルを試してみましたが、同様にミューテーションは発生しません。

Polymer の Web サイトによると、Polymer の「extend」属性を使用した多重継承 (または合成) はサポートされていません。アプリケーション ロジックを反映するために、1 つの Polymer 要素のメソッドと別の要素のメソッドで要素を構成したいと考えています。現在、Polymer でそれを実装する方法はありますか? (javascript ミックスインを使用して行うように)

内部にコスチューム要素を持つポリマー要素があります。クリックしたときにすべて（親と子）を削除したい。

問題は、親要素のインスタンスを閉じるたびにエラーが発生することです。内部に要素を持つ要素を削除しているという事実に関連していると思います。

どうすれば正しく削除できますか？

メソッドコードは次のとおりです。

ここに私が持っているエラーがあります:

エラーの画像は次のとおりです。