2

弊社用のRIAシステム（クロームのみ）を書いています。さまざまなコントロールの数が増えており、ShadowDOMを使用してコードを簡略化することにしました。それは素晴らしいですが、時には外部のスタイル変更が必要です。そしてそれが問題です、例：

タスクバー：

<taskbar side="right">
  <menubtn />
  <applist scrollable>
    <btn app="SpoPlanMon" />
  </applist>
  <tray />
</taskbar>

Shadow DOMを使用すると、applistは次のように変換されます。

<applist>
  <scroll-wrap>
    <scroll-bar>
      <scroll-slider />
    </scroll-bar>
    <scroll-cont>
      <btn app="SpoPlanMon" />
    </scroll-cont>
  </scroll>
</applist>

この場合、サイドに<scroll-slider />応じてスタイルを設定する必要があり<taskbar />ます（いわゆる属性で指定され、動的に変更される場合があります）。残念ながら、taskbar[side="top"] scroll-slider {...}境界の低いカプセル化のみが許可されているため、単に書くことはできません。

「反対側」から要素をcss-selectする方法はありますか？または多分何かのようなvideo::-webkit-media-controls-panel？

4

2 に答える 2

1

CSS変数を使用して、左右のコンテキストをスライダーに伝達できます。実用的な例については、このjsfiddleを参照してください。（Chromeで[実験的なWebKit機能を有効にする]フラグをオンにする必要があります。）

仕組みは次のとおりです。外部コンポーネントは、コンテキスト（この場合は左側または右側）に依存するすべてのプロパティに変数を設定します。この例では、1つの変数、色を設定しています。

<style>
*[side="right"] {
  -webkit-var-slider-color: red;
}

*[side="left"] {
  -webkit-var-slider-color: green;
}
</style>
<taskbar side="right">
  <menubtn />
  <applist scrollable>
    <btn app="SpoPlanMon" />
  </applist>
</taskbar>​

コンポーネントは単に変数を使用します：

<applist>
  <style>
  scroll-slider {
    background: grey; /* default */
    background: -webkit-var(slider-color);
  }
  </style>
  <scroll-wrap>
    <scroll-bar>
      <scroll-slider />
    </scroll-bar>
    <scroll-cont>
      <btn app="SpoPlanMon" />
    </scroll-cont>
  </scroll>
</applist>

この例では、<taskbar side="right">要素はslider-color変数を赤に設定します。CSS変数は自動的にShadowDOMに流れ込むため、applist内では、スクロールスライダーの背景が赤に設定されています。タスクバーをside="left"に変更すると、スタイルが再計算され、スクロールスライダーの背景が自動的に緑色に変わります。

より多くのプロパティを構成する場合は、より多くの変数を使用してください。

プロパティが使用される場所で2回定義する目的

background: grey; /* default */
background: -webkit-var(slider-color);

変数が設定されていない場合を処理します。その場合、2番目のプロパティ定義が無効になり、ドロップされるため、最初のプロパティ定義が適用されます。変数が正しく設定されている場合、2番目の定義は有効であり、最初の定義をオーバーライドします。

CSS変数の優れた点は、変数を定義する要素と一緒にネストすることです。したがって<taskbar side="left">、SpoPlanMon Shadow DOMの内部にある場合は、slider-color変数が緑色にリセットされ、その内部にネストされているスライダーは緑色になります。

WebコンポーネントがシャドウDOM内のパーツを、作成者が定義した疑似IDを使用して「外部から」スタイリングに公開できるようにする設計提案があります。（W3バグ15196はそれほど説明的ではありませんが、これは仕様のバグです。）

疑似IDを使用してこの問題に対処するために、AppListはそのスクロールスライダーを疑似IDで公開します。

<applist>
  <scroll-wrap>
    <scroll-bar>
      <scroll-slider pseudo="slider" />
    </scroll-bar>
    <scroll-cont>
      <btn app="SpoPlanMon" />
    </scroll-cont>
  </scroll>
</applist>

次に、タスクバーでスタイルを設定できます。

<taskbar side="right">
  <style scoped>
    taskbar[side="right"] applist:pseudo(slider) {
      /* styles apply to the <scroll-slider> */
    }
  </style>
  <menubtn />
  <applist scrollable>
    <btn app="SpoPlanMon" />
  </applist>
  <tray />
</taskbar>

これは、タスクバーと一緒にタスクバーコンテキストに固有のスタイルを保持するため、優れています。applistはスライダーに疑似を配置する必要があるため、スタイリングに必要なすべてのものに疑似を与えなかったコンポーネントを再利用すると、問題が発生する可能性があります（CSSは強力なので、物事を台無しにする大きな力をもたらします、したがって、コンポーネントは通常、多くの疑似IDを公開するとは思わない。）

これは実装されておらず、仕様にも実装されていません。実際、正確な構文はおそらく変更されます。したがって、今のところ、疑似IDソリューションに依存することはできません。CSS変数はおそらく行く方法です。

于 2012-09-19T02:00:59.667 に答える
1

Shadow DOM だけでなく本格的なWeb コンポーネントを使用している場合は、Javascript から親タスクバー要素を取得できるはずです。このようなもの：

<element>
    <template>
        ...
    </template>
    <script>
        if (this !== window) {
            this.lifecycle({
                created: function() {
                    this.parentElement.attributes['side'].nodeValue; // "right"
                }
            });
        }
    </script>
</element>

ただし、これにより、タスクバーの外で applist コンポーネントを使用できなくなります。これは一般的に悪いことです。コンポーネントを可能な限りモジュール化、独立、再利用可能にするように努めるべきです。「親要素について正確に何を知る必要があるか」と自問してください。代わりに、アプリリストを次のように記述できますか

<applist scrollable="right">...

複製は、このコンポーネントを好きな場所で使用できるようにするための小さな代償です。知るか？将来的には、タスクバーとアプリリストを次のように使用することを決定するかもしれませんがside="right"、scrollable="bottom"!

アップデート

ホスト要素の変更に合わせて Shadow DOM 要素のスタイルを動的に変更できるようにしたい場合は、まもなく@host @-ruleを使用できるようになります。仕様はここではまったく明確ではありませんが、次のように使用されると思います ( Web Components の W3 仕様のバグに関するコメントから引用):

@host {
    div { background-color: white; }
    .warning { background-color: yellow; }
    .important .warning { background-color: orange; }
}

これにより、（私が思うに）ホストにデフォルトの背景色が白になり、ホストに class がある場合は黄色にオーバーライドされますwarning。また、ホストに class がある場合important、ホスト内の警告要素をオレンジ色の背景色でスタイルします。

于 2012-09-05T13:29:04.397 に答える