ポリマーがスタイルの共有と分離を実装する方法_html/css_WEB-ITnose

ポリマーは非常に前衛的で、Web コンポーネント、ES2015、CSS4 がすべて使用されていると言わざるを得ません。 Web コンポーネントの主な機能は分離ですが、スタイルの共有はどのように実現するのでしょうか?

polymer-starter-kit は初期化の例です。ここでプレビューします。

この例は非常に巧妙に設計されており、app/styles/app-theme.html で変数を定義し、var( で属性を簡単に変更できます)。 ) セレクターは @apply() で呼び出されます。これは Sass の @mixin に相当します。

:root {    --dark-primary-color: #303F9F;    --default-primary-color: #3F51B5;    --light-primary-color: #C5CAE9;    --text-primary-color: #ffffff; /*text/icons*/    --accent-color: #FF4081;    --primary-background-color: #c5cae9;    --primary-text-color: #212121;    --secondary-text-color: #727272;    --disabled-text-color: #bdbdbd;    --divider-color: #B6B6B6;  }  paper-menu a {    @apply(--layout-horizontal);    @apply(--layout-center);    text-decoration: none;    color: var(--menu-link-color);    font-family: 'Roboto', 'Noto', sans-serif;    -webkit-font-smoothing: antialiased;    text-rendering: optimizeLegibility;    font-size: 14px;    font-weight: 400;    line-height: 24px;    min-height: 48px;    padding: 0 16px;  }

Shared-styles.html には共有スタイルが含まれています

.page-title {        @apply(--paper-font-display2);      }      paper-menu a > *, paper-menu paper-item > *, paper-menu paper-icon-item > * {        pointer-events: none;      }      @media (max-width: 600px) {        .page-title {          font-size: 24px!important;        }      }

これは、my-greeting.html ファイル内でどのように呼び出されるか

<style include="shared-styles"></style>    <style>      :host {        display: block;        color: red;      }      input{        color: red;      }    </style>

するとブラウザ上で以下のスタイルが生成され、ネームスペースも自動的に追加されるので素晴らしいです。

paper-menu.my-greeting a.my-greeting > *.my-greeting, paper-menu.my-greeting paper-item.my-greeting > *.my-greeting, paper-menu.my-greeting paper-icon-item.my-greeting > *.my-greeting {  pointer-events: none;}@media (max-width: 600px) {.page-title.my-greeting {  font-size: 24px!important;}}my-greeting {  display: block;        color: red;}input.my-greeting {  color: red;}

index.html にも呼び出しがあります

<style is="custom-style" include="shared-styles"></style>

その後、異なる名前空間が生成されるため、ページレベルの呼び出しとモジュールレベルの呼び出しは異なり、それぞれには影響しません他の。 。

.page-title:not([style-scope]):not(.style-scope) {  font-family:'Roboto', 'Noto', sans-serif;      -webkit-font-smoothing:antialiased;      font-size:45px;      font-weight:400;      letter-spacing:-.018em;      line-height:48px}paper-menu a > *:not([style-scope]):not(.style-scope),paper-menu paper-item > *:not([style-scope]):not(.style-scope),paper-menu paper-icon-item > *:not([style-scope]):not(.style-scope) {  pointer-events: none;}@media (max-width: 600px) {.page-title:not([style-scope]):not(.style-scope) {  font-size: 24px!important;}}

拡張読書

• ローカル DOM のスタイリング
• CSS とスタイリング