polymer如何实现样式的共享和隔离

[zhouwenbin]

不得不说polymer非常的前卫，web component，ES2015，css4全部都用上了。web component主要是隔离作用，那他是如何实现样式的共享呢。

polymer-starter-kit是一个初始化的例子，预览点这里。

这个例子设计的很巧妙，在app/styles/app-theme.html里面定义了各种css变量，可以方便的更改主题的配色，变量用--定义，属性用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;
}

}

扩展阅读

• Styling local DOM
• CSS and Styling