polymer如何實(shí)現(xiàn)樣式的共享和隔離_html/css_WEB-ITnose

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 16:38:26

polymer如何實(shí)現(xiàn)樣式的共享和隔離_html/css_WEB-ITnose

polymer如何實(shí)現(xiàn)樣式的共享和隔離_html/css_WEB-ITnose:不得不說polymer非常的前衛(wèi)，web component，ES2015，css4全部都用上了。web component主要是隔離作用，那他是如何實(shí)現(xiàn)樣式的共享呢。 polymer-starter-kit是一個(gè)初始化的例子，預(yù)覽點(diǎn) 這里。這個(gè)例子設(shè)計(jì)的很巧妙，在 app/styles/app-

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀polymer如何實(shí)現(xiàn)樣式的共享和隔離_html/css_WEB-ITnose:不得不說polymer非常的前衛(wèi)，web component，ES2015，css4全部都用上了。web component主要是隔離作用，那他是如何實(shí)現(xiàn)樣式的共享呢。 polymer-starter-kit是一個(gè)初始化的例子，預(yù)覽點(diǎn) 這里。這個(gè)例子設(shè)計(jì)的很巧妙，在 app/styles/app-

不得不說polymer非常的前衛(wèi)，web component，ES2015，css4全部都用上了。web component主要是隔離作用，那他是如何實(shí)現(xiàn)樣式的共享呢。

polymer-starter-kit是一個(gè)初始化的例子，預(yù)覽點(diǎn) 這里。

這個(gè)例子設(shè)計(jì)的很巧妙，在 app/styles/app-theme.html里面定義了各種css變量，可以方便的更改主題的配色，變量用 --定義，屬性用 var()調(diào)用，選擇器用 @apply()調(diào)用，相當(dāng)于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文件里是這么調(diào)用的

然后在瀏覽器生成了下面的樣式，自動(dòng)加了命名空間，很贊。

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里面也有調(diào)用

然后生成的是不同的命名空間，所以頁面級(jí)調(diào)用和模塊級(jí)調(diào)用是不同的，相互不會(huì)影響。

.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;}}