問題タブ [shady-dom]

Polymer 0.8 で導入された Shady DOM は、スタイルがローカル DOM に漏洩するのを防ぎますか?それとも Shadow DOM だけができることですか?

https://www.polymer-project.org/0.8/docs/devguide/experimental.html#xscope-styling

次の例では、Shady DOM によってタイトルが赤くなるのを防ぐことができますか?

my-element.html

スタイル.css

x-num.html 内

index.html 内

やろうとしてdocument.querySelector("x-num").innerHTML = "4000"も3546と表示されますが、内容が変わったときに結果を変える方法があればお願いしたいです

JavaScript を使用して、Polymer コンポーネントの外部からローカル DOM 要素にアクセスしようとしています。document.querySelector以前は、 を使用して、セレクターを使用して shadowDOM 要素を選択することができました::shadow。

現在、ローカル DOM は「shady DOM」として実装されていることがわかりました。その場合、ローカル DOM 要素にアクセスするにはどうすればよいですか?

私は Poylmer 1.0 を使用していますが、まだhttps://www.polymer-project.org/0.5/articles/styling-elements.html#catを読んでいます。Shady同じロジックがdomに適用されるかどうかは誰にもわかりませんか?

https://events.google.com/io2015/のビデオのやり方が本当に好きです。ビデオを表示するために使用paper-dialogし、ビューポート全体を使用します。

paper-dialogビューポート全体を取得するのに問題があります。画像のように、無理に押し込めないようです。私は試しtop: 0px; bottom 0px; left: 0px, right: 0pxましたが、これは動作を壊します。fitこれまでの画像に最も近い外観を提供します。

質問してください：

1. 確認のため、 のすべての子はに含まpaper-dialogれてい light domますよね？

2. https://events.google.com/io2015/paper-dialogで行われたようにビューポートを埋めるには 、日陰のDOMにアクセスする必要がありますか? これを行うようです。/deep/::shady<paper-dialog class="fit">

これを使用して、すべてのポリマー要素の「--accent-color」を動的に更新します。

Shadow DOM では問題なく動作しますが、Shady DOM では一部の要素が変更されるだけです。

で定義されたカスタム スタイル プロパティを変更する方法を知っている人はいますか

以下はポリマー要素のサンプルです。

カスタムcssを使用してスタイル設定されている例

class プロパティでカスタム css プロパティを適用できましたが、connectingjs を使用してカスタム要素のクラスを に変更するdisconnectedと、新しい css プロパティが適用されません。実際、class プロパティが に戻されるconnectingと、それぞれの css プロパティも適用されません。

これは、ブラウザが shady-dom モードで実行されていて、ポリゴンの塗りつぶしにギャップがあることが原因であると思われます。

css プロパティを shady-dom の要素に直接適用したく<p>なるのですが、この問題を処理する適切な方法があるかどうか知りたいです。

以下は、私が準備して github repoにプッシュした簡単な例でこの問題を示しています。

ライト DOM のスタイル設定ルールを使用して、カスタム要素 "x-menu" (/x-menu.html 内) を作成しました。実際には、そうするための私の使用例は、CSS 変数とミックスインを使用して、ドキュメントとカスタム要素で使用される色、フォント スタックなどを定義することです。

Polymer 1.0 開発ガイドの関連部分で説明されているように、(/demo/index.html に) ドキュメント スタイルを定義するカスタム要素があり、ページのタイポグラフィ ルールが定義されています。

これは、Chrome のネイティブの Shadow DOM で問題なく動作します。

ただし、Shady DOM を使用すると、ドキュメントのスタイル設定は、x-menu 要素のスタイル設定よりも特異性の高いスタイル定義に解決されます。これは、Chrome の開発者ツールのスタイル スタックに表示されるようになりました。

Shady DOM と Shadow DOM ポリフィルにはいくつかの制限があることを理解しています (webcomponents.org では、既知の制限は「CSS カプセル化が制限されている」と単純に述べています)。

考えられる回避策は 2 つありますが、どちらもあまり実用的ではありません。

1. すべてのライト DOM ノードに CSS クラスを追加します (デモ ページで確認できます)。
   • カスタム要素のユーザーはこれを覚えておく必要があり、CSS カプセル化の目標を無効にするため、これは実用的ではありません。
2. CSS ミックスインをローカル スタイル定義に適用します。Shady DOM で処理すると、CSS はドキュメント レベルで「カスタム スタイル」よりも特異性が高くなります。
   • これはより面倒になり、CSS の開発、保守、および処理に不要なオーバーヘッドが追加されます。

この問題に対する適切な回避策のアイデアを探しています。最悪の場合、要素のユーザーではなく、要素の開発者に責任を負わせたいと考えています。

私はしばらくこのエラーを追いかけてきました。開発ではすべてがうまく機能していますが、本番用に Heroku にプッシュするとうまくいきません。バックエンドで帆を使用していますが、これはクライアント側の問題であるため、問題ではありません。最悪の部分は、これが機能していて、ほんの数日前に壊れたことです. 私の歩みをさかのぼっても、原因はわかりませんでした。

長いストーリーの短い写真は、誰かがこれを以前に見たことがある場合に役立つかもしれません.

本番環境でアプリをロードすると、これらのエラーが表示され始めます」

開発時にローカルでこれを取得していなかったため、これは混乱を招きました。過去にjs concatとminificationで問題が発生したため、本番環境ではオフにしました。それでも同じエラー。次に、生産と開発の責任者の違いに気付きました。

製造：

発達

次に、ロード時に動的に追加するポリマー コンポーネントへのリンクを最初のページにチェックしました。両方の生産と開発は同じでした：

次に、 を使用してポリマー コンポーネントを動的にインポートしてみましたPolymer.Base.importHref('/vendor/paper-checkbox/paper-checkbox.html')。head に追加された怪しげな DOM スタイルをインポートした後、本番環境と開発環境では異なっていました

製造：

発達：

document.createElement('paper-checkbox')最後に、開発時にローカルで問題なく機能する paper-checkbox 要素を作成したとき。本番環境では、以前と同じようにエラーが発生します:

私はここで立ち往生しています。誰かがこれを以前に見て、洞察を持っているなら、私はそれを感謝します.