問題タブ [shady-dom]

Safari ブラウザーで Selenium Web ドライバーを使用してシャドウ DOM 要素を自動化する際に問題に直面しています。

私たちが直面している主な問題は、shadow-root にあるテキスト ボックスにキーを送信できないことです。javascript を使用して教科書の値を設定しようとしましたが、それも機能していません。

上記の機能は Firefox では問題なく動作しますが、問題は Safari にあります。

私は一般的な Web コンポーネントに取り組んでおり、jquery ベースのグリッド ライブラリを Polymer でラップしています。ライブラリに付属のカスタム テーマは、デフォルトの shady DOM グローバル設定を使用すると問題なく動作することがわかりましたが、shadow DOM を使用する場合に動作させるには大幅な調整が必要です。

問題は、両方をどのようにサポートするのが最善かということです。

単純に、この疑似マークアップのようなものが機能することを望みます。

また、グローバル設定で指定された必要なファイルのみが必要なため、shadow dom が有効になっている場合は shadyDomStyles.css は要求されず、shady dom が有効になっている場合は shadowDomStyles.html は要求されません。

助言がありますか？

2 つの要素で構成される単純な Polymer アプリがあります。最初のx-app要素は、そのローカル dom内に 2 番目の要素x-innerを持ちます。x-inner 要素内で、:host に適用するspinと呼ばれるキーフレーム アニメーションを定義します。x-app 内では、同じアニメーション名spinも適用しますが、キーフレーム アニメーションは定義されていません。ただし、スピン アニメーションは両方の要素で機能します。@keyframe が内部要素から漏れているように思えます。

これは予期される動作ですか? または、@keyframe アニメーションの定義が間違っていますか?

例については、私の jsbin を参照してください: jsbin

https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom

これにより、ポリマーを使用せずに独自のカスタム Web ページをゼロから作成できることに興奮しました。

:hostたとえば、CSSがEdgeとFireFoxで機能していないことを確認するためだけに。importw3cがes6モジュールで何をしたいのかを理解するまで、今のところhtmlなしで処理できますが、cssなしで半分実装された独自のShadow DOMバージョンを持つ各ブラウザは私のボタンを押しています。

したがって、すべてのブラウザーで Web コンポーネントを使用するには、完全なポリマー スタックが必要です。

<script src="../webcomponentsjs/webcomponents-lite.js"></script>

<link rel="import" href="../hello-world.html">

<hello-world>Hello World Polymer 2.x</hello-world>

Edge と FireFox をポリフィルして、実際の Shadow DOM を持たせる方法を知っている人はいますか?

これは私が試したものですが、Edge と FireFox に Shadow ワナビーを別の場所に置き、shadydom/shadycss を使用するように指示する方法がわかりません。

https://jsbin.com/quvozo

Polymer 1.x はデフォルトでShady DOMを使用しますが、次のようwindow.Polymerにインポートする前にオブジェクトを設定することにより、初期化時に変更できます。polymer.html

ただし、Polymer 2.0は、window.Polymer = {dom: 'shady'}. Shady DOM に切り替えるにはどうすればよいですか?

Firefox アドオンを作成していますが、Firefox が attachShadow 関数をサポートしていないことがわかりました。したがって、私は Shadydom を使用しようとしていますが、シャドウ ルートを追加する予定の div にコンテンツを適用していますが、正常に機能していないようです。内部はある<style></style>のですが、ページの残りの部分に影響を与えているようですので、シャドウ ルートが適切に作成されていないのでしょうか?

shadydom.min.js は manifest.json ファイル内にロードされます。

シャドウ ルート dom を作成するためのコードを次に示します。ちなみに、var shadowは以前にコードで定義されています。

次に、HTML 文字列を読み込み、次のように追加しますshadow.innerHTML += htmlString

この文字列の中にスタイリングと html コードがあり、リンクのグローバルなスタイリングがありますが、シャドウ DOM が作成された場合はその外側にあるページ上の他のすべてのリンクにも影響します。

また、Firefox はまだ Shadow DOM をサポートしていないため、Shadow DOM がインスペクタ ツールで作成されたかどうかを実際に確認することはできません。