問題タブ [shadow-dom]

各セルがその座標に対応する一意の ID を持つようにテーブルを作成しようとしています。これは Polymer では問題ありません。やったばかり

<table id="table"> <template repeat="{{ file in files }}"> <tr> <template repeat="{{ rank in ranks }}"> <td id="{{file}}{{rank}}">{{ space }}</td> </template> </tr> </template> </table>

ここでranks、filesとspaceは、Polymer() 関数に渡されるオブジェクトのキーです (それぞれ配列と文字列)。これはすべて期待どおりに機能します。

ここでの問題は、テンプレートで生成された ID でテーブル セルの 1 つを選択することです。やっている

var place = file + rank; this.$.place.innerHTML = 'foo'

「未定義のinnerHTMLプロパティを設定できません」というエラーがスローされるため、機能しません。テンプレートで明示的に定義されていない ID (「#table」など) を検索する方法を Polymer のカスタム ノード検索構文に伝える方法を思いつくことはできません。

Bootstrap 3.1.1 と Polymer 0.2.4 を長い間使用してきましたが、突然、前回の Chrome 自動更新 (バージョン 35.0.1916.114) 以降の可能性がありますが、Bootstrap が Shadow DOM 要素のスタイル設定を停止しました。Chrome DevTools で (Shadow) DOM を調べたときに、これらのノード内の CSS クラスが表示されないことを確認できました。Firefox などの他のブラウザでは、まだ機能しています。

これが私に欠けているものなのか、何らかのバグなのかはわかりませんが、この奇妙なスタイル設定の動作は jsbin で直接見ることができます。私の問題を説明するために、実際のコンポーネントから抽出されたコードの 2 つの適応チャンクを含めています。

• http://jsbin.com/yugih/1/ (動作例)
• http://jsbin.com/maleg/1/ (動かない例)

前の例で強調したかったのは、CSS スタイリングが適用される (または適用されない) 方法の違いにすぎないことに注意してください。

前もって感謝します、

ナチョ

PS私はPolymer 0.3.1でも同じ結果でチェックしました。

この単純なポリマー カスタム要素があります。

問題は、ホバー (およびアクション - テスト用) が機能しないことです)、なぜですか?

特定のカスタム要素を特定のカスタム要素内でのみ使用できるようにすることはできますか?

たとえばsite-heading、要素とhelp-icon要素を作成しました。

help-iconこれは最も実用的な例ではありませんが、が のコンテキストでのみ意味を持つ高度に特殊化された要素であるとしましょうsite-heading。要素を内部でのみ使用するように強制するにはどうすればよいsite-headingですか?

わーい！

いや！

更新 2: @ebidel

この関係は実際にはサポートされていないようで、仕様にも含まれていない可能性があります。これは、スコープ化された（分離された？）要素を考慮して、重くする必要があると私が信じている現実のケースです。

ベンダーが出荷可能な Web コンポーネントを作成するとします。たとえば、SoundCloud は<soundcloud-player>要素を作成します。プレイヤーはトラック リストが必要なので、<track-info attributes="track-id crop etc">{{HTML for description pane}}</track-info>要素を作成します。

要素はの<track-info>子としてのみ有用です<soundcloud-player>:

• <track-info>現在、新しい Web コンポーネントが要素を定義するまでは、理論上はまったく問題あり<track-info>ません。

• ベンダーが作成する可能性のあるすべての要素にその名前のプレフィックスを付けるのは本当に理にかなっていますか? すなわち。<soundcloud-track-info>

元の質問に対する回答が既にあるように見えるため、この会話を別の場所に移動する必要がありますか?

Google の Polymer-Project Web-Components Library をいじっています。canvas 要素を含む custom-tag を作成し、javascript を介して custom-element 内からアクセスしたいと考えています。しかし、document.querySelectorまたはdocument.getElementByIdでアクセスすることはできません-同様の問題に関するヒントや経験は大歓迎です。

ここに私の情報源があります：

console.log 出力は常に NULL/空のコレクションを返します。ライフサイクルのどの部分でキャンバスを呼び出そうとしても関係ありません。私の間違いはどこにあり、何が間違っていますか?

よろしく、ルポ

たとえば、ユーザーがビデオ タグのコントロールをクリックしたときなどです。
私はインターネットを検索しましたが、何も見つかりませんでした。

要素を介してシャドウ DOM で受信したときに、ライト DOM で発生したイベントがどのように見えるかを理解しようとしています<content>。Shadow DOM W3C Draftを読んでいますが、完全には理解できていませんが、EventListener 添付ファイルの観点からイベントを「再ターゲット」する必要があるようです。

イベント パスが複数のノード ツリーにまたがっている場合、カプセル化を維持するために、イベントのターゲットに関するイベントの情報が調整されます。イベントのリターゲットは、イベントがディスパッチされたノードの祖先ごとに相対的なターゲットを計算するプロセスです。相対ターゲットは、カプセル化を維持しながら、特定の祖先でディスパッチされたイベントのターゲットを最も正確に表すノードです。

と

イベント派遣時：

• イベント ターゲットおよび currentTarget 属性は、イベント リスナーが呼び出されるノードの相対ターゲットを返す必要があります。

これは、子をコンテナーに配置し、クリック EventListener をコンテナー (シャドウ DOM) に追加するだけの単純な Polymer カスタム要素です。この場合、子はボタンです。

これを Chrome 38.0.2075.0 カナリアで実行すると、ボタンをクリックすると次のようになります。

コンテナをクリックすると、次のようになります。

そのため、ソース要素が含まれている DOM に応じて、ライト DOM またはシャドウ DOM のいずれかでイベント ターゲットを取得します。どちらの場合もシャドウ DOM からターゲットを取得することを期待していました。私の質問は次のとおりです。

1. これが機能するはずの方法ですか、そして
2. もしそうなら、シャドウDOMにリターゲットされたライトDOMからバブルアップするイベントを取得する別の方法はありますか?

誰かが「何をしようとしていますか?」と尋ねたい場合に備えて、私は動作を理解する以外に特に何もしようとはしていません。

Polymer の ShadowDOM とMutationObserverpolyfill を使用しており、次のことを行う必要があります。

• レイアウトを実行できるように a が挿入されたことを検出しHTMLCanvasElementます (その幅と高さは、DOM ツリーから切り離された場合は不定offsetWidthですoffsetHeight)
• requestAnimationFrame要素が削除されたことを検出して、ループを停止できるようにする

従来、Shadow DOM を使用しない場合、これは次のように機能します。

1. キャンバス要素に取り付けMutationObserverてdocument.body実行するquerySelectorAll
2. layoutNodeたとえば、これらの要素に対して何らかのメソッドを実行します
3. アニメーション ループでdocument.body.contains(node)が返された場合false、ノードは DOM から削除されています。

Shadow DOM を使用する場合、ルートが追加された DOM 内のすべての要素に対してスキャンを実行し (非常に非効率的と思われる)、Shadow DOM の境界を回避することができlayoutNodeますHTMLCanvasElement。

このノードがまだ DOM ツリーにあることをキャンバスのアニメーション ループから確認するにはどうすればよいですか?

DOM ノードが挿入されたことを検出するために使用するより良い API はありますか?

(注: MutationEvents は、Polymer の CustomElements ポリフィルを使用すると利用できません。)