1

私はこの例を持っています：

http://codepen.io/dbugger/pen/IuDxw

Shadow DOM 内に挿入ポイントがあり、そこにスタイルを適用しようとすると、それが消えてしまいます。しかし、画像はまだ表示されています。私は、Web コンポーネントから適切に理解していない原則があるのではないかと考えています。

誰かが私が間違っていることを説明できますか?

4

2 に答える 2

0

kkemple が述べたように、画像は Shadow DOM の一部ではなく、Light DOM の一部であり、コンポーネント内から直接アクセスできないというのが秘訣です。これは、OOP 言語でクラス コンストラクターに渡されるパラメーターのように、ユーザーが提供するコンテンツです。可能であれば、ユーザーはそれに合わせて独自のスタイルを提供する必要があります。

そうは言っても、コンポーネントの作成者がユーザー提供のコンテンツのスタイルを設定したいという有効なユースケースが確実に存在します。ホスト、イベント (クリック) などの属性に基づいてユーザー提供のマークアップの特定の部分を非表示にすることは、間違いなくその 1 つです。その場合、<content>要素を Shadow DOM 要素でラップし、それを非表示にします:

<template>
  <style>
    .image {
      display: none;
    }
  </style>
  <div class="image">
    <content></content>
  </div>
</template>

http://codepen.io/anon/pen/rCGqD

補足:スタイルを Light DOM 要素に直接適用することは技術的に可能ですが、多くの場合、これは実装の詳細を外部に漏らしていると見なされることに注意してください。最初の解決策が機能する場合は、代わりにそれを使用してください。

于 2013-11-23T23:16:43.787 に答える