問題タブ [web-component]

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

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

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

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

次の Web コンポーネントまたはカスタム要素を作成しているとします。

( github の polyfill ) これは Chrome で動作します。しかし、これを PhantomJS で実行しようとすると、次のエラーが発生します。

再現したい場合は、ここに私のphantomjsスクリプトがあります

私は他のポリフィルを試しました

• https://github.com/Polymer/CustomElements
• https://github.com/mozilla/web-components

しかし、実際にはどれも機能しませんでした。これを修正する方法はありますか？

カスタム要素から始めたばかりで、この記事によると、カスタム要素は次のように定義できます。

これは、新しい要素を作成するたびに 'createdCallback' が呼び出される、Chrome ブラウザーでうまく機能します。

ここで公式ドキュメントを見ると、たとえば、createdCallback がどこにも記載されていません。誰かが W3C ドキュメントを理解し、これがなぜなのか説明できますか?

さらに、Web コンポーネントのカスタム要素を見ると、まったく異なって見えます。そのため、カスタム要素には 2 つの異なるタイプがあります。これは意味がありませんか、それともこれら 2 つが一緒に存在できる正当な理由がありますか?

次のようにカスタム要素を作成すると

さて、この後、その要素のプロトタイプに何かを追加したいと思います。

たとえば、「div」要素を使用してこれを行うことができます。

カスタム要素 'bar-foo' でそれを行うにはどうすればよいですか?

HTML インポートはWeb コンポーネント仕様の一部であり、Web 上の依存関係を処理する方法を提供します。ES6 モジュールも同じことを行いますが、Javascript コードのみです。

これら2つがどのように連携するかについて、明確な点はありますか?

編集: 例:私の最近のプロジェクトでは、2 つの Javascript コンポーネント (ファイル) があり、そのうちの 1 つは他のコンポーネントに依存していましたが、HTML コード (別のコンポーネント) はそれらのいずれかを使用できました。そのため、HTML に依存スクリプトを含めたときに、親スクリプトも含めたくありませんでした (依存関係を手動で処理することを避けました)。ES6モジュールとスクリプトインクルードを混在させる以外に、明確に定義された方法はないようです。私が目にする唯一のオプションは、component.io のように、必要なファイルと依存関係を指定して、コンポーネントごとに個別のファイルを維持することです。

ライト DOM に表示され<div>ずに、ポリマー カスタム要素がコンテナー内のコンテンツをレンダリングするのに苦労しています。<div>

としてレンダリングします

<div>Shadow DOMに含まれるものをどのようにレンダリングできるかについて、誰かが私に洞察を与えることができますか?