問題タブ [shadow-dom]

この記事を読んで理解したところによると、各ネイティブ ブラウザー ウィジェットは、実際には基本的な要素、スタイリング、およびスクリプトの組み合わせです。これは疑問を投げかけます - それらが基本的なビルディングブロックで構成されている場合、それは JavaScript を介してそれらをカスタマイズする方法があることを意味しますか? また、一部の JavaScript ライブラリ/プラグインのように、単に「Shadow DOM」プロパティにアクセスし、いくつかの CSS スタイルをそれらに追加するなど、置き換えのような方法を意味するわけではありません。また、このページにはいくつかの使用例がありますが、実用的なものはありません。

誰もこのようなことを試したことがありますか？それはまったく可能ですか？欠点？

ありがとう。

Shadow DOM を示す動作中の JS Fiddle がここにあります。（注：これを機能させるには、いくつかの設定が必要です。私は、Google Chrome バージョン 20.0.1132.47 ベータ版を使用しており、「Shadow DOM」の実験が有効になっていますchrome://flags）

ここbuttonで a の代わりに aを使用するリビジョンを作成しましたがspan、機能しません。以下をスローします。

Shadow DOM を に追加できるのに に追加できない理由はspan何buttonですか?

弊社用のRIAシステム（クロームのみ）を書いています。さまざまなコントロールの数が増えており、ShadowDOMを使用してコードを簡略化することにしました。それは素晴らしいですが、時には外部のスタイル変更が必要です。そしてそれが問題です、例：

タスクバー：

Shadow DOMを使用すると、applistは次のように変換されます。

この場合、サイドに<scroll-slider />応じてスタイルを設定する必要があり<taskbar />ます（いわゆる属性で指定され、動的に変更される場合があります）。残念ながら、taskbar[side="top"] scroll-slider {...}境界の低いカプセル化のみが許可されているため、単に書くことはできません。

「反対側」から要素をcss-selectする方法はありますか？または多分何かのようなvideo::-webkit-media-controls-panel？

現時点でデフォルトのブラウザサポートがない「ShadowDOM」と呼ばれる次の標準に興味があります。しかし、サーバー側のエミュレーションはどうですか？テンプレートエンジンのカスタムタグのようなものを意味しますが、W3C Working Draftと互換性のある内部CSSおよびJavaScript名前空間を備えているため、ブラウザがサポートを開始すると、テンプレートエンジンは前処理されたプレーンHTMLではなくshadow-domでうんざりします。また、ブラウザが異なるshadow-dom標準の理解を持っている場合にも役立ちます。実装はありますか？それはまったく合理的ですか？

目標：カプセル化されたウィジェット

私が次のような友達のリストを表示するウィジェットの開発者であるとします。

友達のマイケル、アンナ、シャーリーはこのウェブページが大好きです！

最初のアプローチ：作成するスクリプトspan

span素朴に、私はこの情報をWebサイトのに配置するスクリプトを作成します。ただし、ExampleSiteの所有者は、簡単なDOM操作で友達の名前にアクセスできるようになりました。
これはプライバシー/セキュリティの大きな問題です。

2番目のアプローチ：iframe

ExampleSiteに友達の名前へのアクセスを許可したくありません。代わりに、ウェブサイトの所有者にウィジェットを追加さ​​せますiframe：

ExampleSiteの所有者は、のコンテンツをスクレイプできないため、これは機能しiframeます。ただし、この全体iframeはかなり醜いです。なぜなら、それはWebサイトのスタイリングに統合されていないspanのですが、統合されているからです。

望ましいアプローチ：Shadow DOM

昨日ShadowDomについて読んだとき、それが両方の問題の解決策になるのではないかと思いました。spanこれにより、元のWebサイトがアクセスできないようにするスクリプトを作成できます。

ただし、** Shadow DOMはそのコンテンツを周囲のページから隠しますか？**
ここでの前提は、私​​のスクリプト以外は誰も `root`にアクセスできないということですが、それは正しいですか？

結局のところ、Shadow DOM仕様では、機能的なカプセル化が提供されていると書かれていますが、実際には信頼できるカプセル化が必要です。コンポーネントモデルのユースケースには実際にこのユースケースがリストされていますが、ShadowDOMが必要な制限プロパティを実現しているかどうかはわかりません。

ページの複数の場所で「同じ」HTML 要素をレンダリングしたいと考えています。この要素はスクリプト化/アニメーション化されており、さまざまなレンダリングを同期させる必要があります。

私が検討した解決策は次のとおりです。

1. 要素のコピーを複数の場所に配置し、それらすべてを更新します。これは私が避けようとしているものです。
2. 要素のコピーを複数の場所に配置します。コピーの 1 つを更新し、ミューテーション イベントを使用してそれらの変更をキャプチャし、他のコピーに対して再生します。大変な作業のようです。
3. シャドウ DOM を使用します。私はこの代替手段に大きな期待を寄せていましたが、最初は「挿入ポイント」を使用して可能に見えました。これにより、ここの DOM サブツリーをあそこの DOM サブツリーに仮想的に配置できます。

Chrome 25 で利用可能なこの最後の代替手段はテストしていません。W3C仕様には次のように書かれています：

特別な考慮に値する 1 つのケースは、挿入ポイントが別のシャドウ ホストの子ノードである場合です。ノードが複数の挿入ポイントに分散されることの影響は、再投影と呼ばれます。

しかしその後...

再投影中に複数の挿入ポイントに分散されるにもかかわらず、再投影が発生する制約のために、ノードはまだ 1 回だけレンダリングされます。挿入ポイントはシャドウ ホストの子である場合にのみ再投影の対象となるため、それらは決してレンダリングされません。代わりに、シャドウ ツリーがその場所にレンダリングされます。

Shadow DOM は私が望むことを実行する可能性が高く、テストする価値があると思われますか、それとも他の推奨されるアプローチはありますか?

ビデオの進行状況バーをinput type=range表すスライダーがあります。このスライダーは小さなコンテナー内にラップされているため、スライダーのつまみがコンテナーの端に達すると、コンテナーが左にスクロールして、つまみが再び表示されるようになります。したがって、これがいつ発生するかを検出する必要があります。スライダーをクリックした後にも発生するため、ビデオの timeupdate イベントを使用できませんが、この場合、コンテナーはスクロールしないはずです。HTMLスライダーよりも精度が低いため、jQueryUIスライダーも使用できません...

親指の実際の位置をピクセル単位で検出する方法を見つける必要があると思います。残念ながらシャドウDOM要素はどれですか... javascript/jqueryでそれを取得する方法はありますか?

<input type=range>更新:これは、開発者ツールに表示されるように、Chrome が DOM 要素をレンダリングする方法です。

私がやりたいことは、その値を探すことなく、スライダーのつまみ div の位置 (絶対または相対) を検出することです。

のシャドウDOM要素のCSSを編集していてinput[type=range]、スライダーのつまみを拡張して下のdivをカバーしたいのですが、これを行うにpositionは、つまみのをに設定する必要がありfixedます。問題は、親指の下に配置する必要がある下のdivに、親指をposition: relative覆って前景に配置されている（そして別の位置に配置できない）divがいくつかあることです。

これがコードです。しかし、私は自分の問題をよりよく説明するためにjsFiddleを作成しました。

HTML

CSS：

基本的に、position: relativeそのdivからプロパティを削除せずに、黒いバーが黄色のdivをカバーするようにします。それは可能ですか？

DOM を検索およびトラバースするためのカスタム関数を提供することで、Shadow DOM W3C ドラフトを JavaScript でポリフィルできますか? これは行われましたか？私が見つけた試みはかなりおとなしいシムであり、仕様をエミュレートするために多くの努力をしていないようです.

これが簡単な作業ではないことは承知していますが、誰かが十分に検討したのではないでしょうか?

html5rocks でShadow DOM 101 チュートリアルをプレイしています。Chrome 25.0.1364.172 を使用しappendChildていますが、(チュートリアルに示されているように) Shadow DOM ルートにアクセスしようとすると、 Uncaught Error: NotFoundError: DOM Exception 8. 明らかな何かが欠けていると思いますが、何がわかりません。コードは次のとおりです。

私のブラウザはチュートリアルに示されている新しいタグをサポートしていないので、<template>に変更しました<script type="text/x-tmpl">。

編集:試してみると、コンソールから同じエラーが表示されます: