問題タブ [shadow-dom]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
dart - ネストされたポリマー テンプレートの継承
ポリマーの子テンプレートを親のテンプレートで囲む方法はありますか?
次のシャドウ タグの例では、親のテンプレートを子ビューに取り込みますが、その内容は無視されます。
親ポリマー要素
子ポリマー要素
javascript - iframe または shadow dom を使用してクロスブラウザーのサブドキュメントを作成するには?
独自の<head>、<body>、スタイル、html、および js を使用して、JavaScript で完全にカプセル化されたサブドキュメントを作成したいと考えています。基本的にシャドウ DOM または iframe ですが、src 属性はありません。
私は Shadow DOM のアイデアを気に入っていますが、その支持率は非常に低く、プライム タイムの準備が整っていません。
だから私はiframeの作成に取り組んできましたが、途中でさまざまな障害にぶつかっています. これは、私のさまざまな試みを示す jsFiddle です。
iframe は dom に存在できません。この部分は重要です。明確にするために、dom に一時的に存在する場合は問題ありませんが、抽出可能で JS にのみ存在する必要があります。
甘い、私たちは頭を持っています
しかし、内容はどのように見えますか？
これはドキュメントですが、要素の内部にあるわけではないので、DOM または別の要素の内部に配置してみませんか? セレクターにコンテキストまたは何かがないため、次の試みは両方とも機能しません...
dom に何も追加せずに iframe/subdocuemnt を作成できるようにしたいのですが、必要に応じて、後で dom から削除して js でさらに管理できるようにしたいと考えています。
この小さな関数は機能しませんが、作成したいiframeまたはサブドキュメントジェネレーターの種類を示しています
polymer - カスタム要素で、周囲のページのスタイルをリンクに使用するにはどうすればよいですか?
Shadow DOM にリンクを生成するカスタム<my-header>要素があり、周囲のページの他のリンクと同じスタイルにしたいと考えています。古いapplyAuthorStyles属性はそれを達成するための適切な方法でしたが、独自の問題がありました. これapplyAuthorStylesが削除されたので、私が目にするオプションは、組み込み者にグローバル スタイルを次のように定義させることです。
ページのスタイルを必要としない要素のスタイルに侵入します。
これを行うより良い方法はありますか？
http://jsbin.com/yusox/1/edit以下にいくつかのサンプル コードがあります。ブラウザーでネイティブの Shadow DOM がオンになっている場合にのみ、矛盾が表示されます (Chrome では chrome://flags/#enable-experimental-web-platform-features)。
css-selectors - ほとんどの子の*後に*特定の要素を選択するシャドウ DOM を作成するにはどうすればよいですか?
メインコンテンツ<figure>の下に配置したいカスタムのような要素を書いています。私が使用しているカスタム要素の子ノードからいくつかのコンテンツ (潜在的なフォーマットを含むテキスト) を含める必要があり<figcaption>ます。ただし、Shadow DOM の仕様に従って、カスタム要素の本体を配置した以前の要素には既に配布されています。<figcaption><content select="span.caption"></content><span><content></content>
<content select=":not(span.caption)"></content>キャプションの配布を避けるために使用しようとしましたが、それは複合セレクターではないようで、何も一致しません。
必要な順序で要素をレンダリングするための推奨される方法は何ですか?
問題のあるコードは次のとおりです。これもhttp://jsbin.com/vizoqusu/3/editにあります。
css - display:inline カスタム要素に display:block 要素が含まれていると何が問題になりますか?
例をマークアップするためのカスタム要素を作成しています ( http://jsbin.com/kiboxuca/1/editで遊んでください):
これにより、私が望む外観が生成されます。
いくつかのテキスト [例:はじめに
その他の例 — 例の終了]
ただし、<my-example>要素を作成するため、ブロックレベルの要素が問題を引き起こすのではないdisplay:inlineかと心配しています。<pre>
スタイリング<my-example>asdisplay:blockは、新しい行で開始することを強制します。これは、模倣する必要があるPDFと矛盾します。
このような CSS ボックス モデルに違反すると、どのような問題が予想されますか? また、それらを軽減するにはどうすればよいですか?
dart - ポインター イベントのターゲットは、常に最も外側の Polymer 要素です
Polymer-ui-cardを JS から Dartに移植 しています。
違いは、私たちのプロジェクトには (慣例により) アプリケーション全体を含む追加の Polymer 要素 (app-element) があることです。
JavaScriptでは次のようになります
Dartポートは次のようになります
app-elementには、body タグが JS に持つコンテンツがあります
Polymer-ui-card (JS と Dart で同じ)
ここでの問題は、すべてのポインタ イベントのターゲットが要素では<app-element>なく であることです。<polymer-ui-card>
これは設計によるものですか、それとも Dart だけの問題ですか、それとも何か間違っていますか?