특정 요소에만 사용자 지정 스타일을 적용하려면 어떻게해야합니까?

테마가 가능한 Polymer 웹 구성 요소를 개발 중입니다. custom-style 문서에 따라 나는 다음과 같은 일을 해요 : 그것은 내 모든 요소에 사용자 지정 테마를 적용되는특정 요소에만 사용자 지정 스타일을 적용하려면 어떻게해야합니까?

<link rel="import" href="themes/my-element-theme.html"> 
    <style is="custom-style" include="my-element-theme"></style>

그러나,이 둔기입니다. 다음과 같이

하나 개의 솔루션 범위에 CSS 클래스에 내 모든 테마 스타일입니다 :

:root custom-element.my-element-theme { 
    font-family: 'Noto Sans', 'Myriad Pro', Calibri, Helvetica, Arial, sans-serif; 
}

그러나,이 어려운 전체 문서에 사용자 정의 스타일을 적용 할 수 있습니다.

CSS 선택기를 사용하여 요소에 맞춤 스타일을 더 선택적으로 적용 할 수 있습니까? 모범 사례는 무엇입니까?

출처

2016-11-08 Ricardo Gladwell

선택기를 사용하여 테마 요소에 선택적으로 스타일을 적용 할 수 있습니다.

맞춤 속성 및 mixins를 사용하고 해당 값을 대상 요소로 설정하는 것이 가장 좋습니다. 다음은 예입니다 :

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <link href="http://polygit.org/components/polymer/polymer.html" rel="import" /> 
 
    <style is="custom-style"> 
 
    .container1 my-elem { 
 
     --my-elem-span: { 
 
     color: red; 
 
     } 
 
    } 
 
    
 
    .container2 my-elem { 
 
     --my-elem-span: { 
 
     color: blue; 
 
     } 
 
    } 
 
    </style> 
 
</head> 
 
<body> 
 
    <div class="container1"> 
 
    <my-elem>hello red</my-elem> 
 
    </div> 
 
    <div class="container2"> 
 
    <my-elem>hello blue</my-elem> 
 
    </div> 
 
    
 
    <dom-module id="my-elem"> 
 
    <template> 
 
     <style> 
 
     :host { display: block; } 
 
     
 
     :host span { 
 
      @apply(--my-elem-span); 
 
     } 
 
     </style> 
 
     
 
     <span><content></content></span> 
 
    </template> 
 
    
 
    <script> 
 
     Polymer({ 
 
     is: 'my-elem' 
 
     }); 
 
    </script> 
 
    </dom-module> 
 
</body> 
 
</html>

그리고 별도의 스타일 모듈의 CSS 규칙을 배치하여 그랬던 것처럼 당신은 당신에게 스타일을 구체화 할 수 있습니다.

<dom-module id="my-elem-theme"> 
    <template> 
    <style> 
     .container1 my-elem { 
     --my-elem-span: { 
      color: red; 
     } 
     } 

    .container2 my-elem { 
     --my-elem-span: { 
     color: blue; 
     } 
    } 
    </style> 
    </template> 
</dom-module>

그런 다음 당신이 길을 가져옵니다

<link rel="import" href="my-elem-theme.html"> 
<style is="custom-style" include="my-elem-theme"></style>

을

출처

2016-11-08 19:21:07

특정 요소에만 사용자 지정 스타일을 적용하려면 어떻게해야합니까?

답변

관련 문제