問題タブ [native-web-component]
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.
html - スロット可能な要素は何ですか?
名前付きスロットに tr (テーブル行) を使用できますか? tr をスロットのフォールバック コンテンツとして使用するとどうなりますか?
このような：
コードペンのサンプルコードhttps://codepen.io/JJia/pen/odXrWJ
javascript - Web コンポーネントで外部定義のスタイルをオーバーライドする
私は、Polymer などのサードパーティ ライブラリを使用せずに、 Web コンポーネントに最初の一歩を踏み出しています。主なセールス ポイントの 1 つは、Web コンポーネントのスタイルが他の場所で定義されたスタイルから分離されているため、コンポーネントのシャドウ DOM をサンドボックスのような環境でスタイル設定できることです。
私が直面している問題は、スタイルがスロット要素をどのようにカスケードするかです。スロット要素はシャドウ DOM の一部ではないため::slotted()、コンポーネント テンプレート内のセレクターでのみターゲットにすることができます。これは素晴らしいことですが、外部で定義されたスタイルもスロット要素に無敵の特異性*で適用されるため、Web コンポーネントがすべてのコンテキストで正しく表示されることを保証することはほとんど不可能です。
*他にも!important。
この問題は、次のように要約できます。
この「機能」の価値を理解するのに苦労しています。リンクを他の形式で指定して JS でノードを作成するか!important、color プロパティに追加する必要があります。これは、文字通り、定義していない他のプロパティに関しては一貫性を保証しません。
この問題はどこかで対処されていますか、それともライト DOM 構造を変更することで簡単に解決できますか? リンクのリストをスロットに取得する方法が他にわかりません。