폴리머 사용자 지정 요소 : 수입과 재사용 CSS

Question

문제 :

나는 그것을 부트 스트랩에서 제공하는 클래스를 인식하지 못하는, 부트 스트랩 아이콘을 렌더링 할 <i> 태그를 만들 것 캔트 :

요소를 진단하기

tag.html

<link rel="import" href="../bower_components/polymer/polymer.html"> 
<polymer-element name="polymer-tag" attributes="name"> 
    <template> 
    <link rel="import" href="bootstrap.html"> 

    <style> 
     :host { display: block; } 
    </style> 


    <div> 
     <span class="name">{{ name }}</span> 

     <!-- This classes are not recognized and the icon is not displayed --> 
     <i class="glyphicon glyphicon-plus-sign"></i> 

    </div> 

    </template> 
    <script> 
    Polymer('polymer-tag', {...}); 

    </script> 
</polymer-element> 

<polymer-element> 외부로 가져 오기를 시도했지만 작동하지 않습니다. 나는 또한, 사이트가 두 번로드 색인에 bootstrap.css를 사용하는 경우 대신 수입의 나는, 그것은 작동 bootstrap.css을 가리키는 간단한 이전 링크를로드하지만, 경우

<link rel="stylesheet" type="text/css" href="../bower_components/bootstrap/dist/css/bootstrap.min.css"> 

:

bootstrap.html이 포함 bootstrap.css

웹 구성 요소의 제한 사항입니까? Polymer의 문제입니까?

감사합니다.

프랜

Answer 1

당신은 CSS를로드하기 위해 오늘 템플릿 내에서 가져 오기를 사용할 수 없습니다은이 작동하지 알려져, 당신의 요소 범위.

simple old link pointing to bootstrap.css을 사용하는 원래의 아이디어는 사용자 에이전트가 해당 CSS를 공유 할만큼 충분히 똑똑해야한다는 개념입니다.

Google은 때때로 브라우저 버그로 인해 때때로 볼 수있는 이중로드를 고려합니다. 일시적으로 함께 살 수 있다면 그렇게 할 수 있습니다. 불행히도 bootstrap.css은 scoped CSS를 염두에두고 작성된 것이 아니기 때문에이 문제는 커스텀 CSS보다 더 많습니다.

Answer 2

HTML 가져 오기를 사용하여 외부 CSS를로드하는 것이 이제는 중합체 1.0에서 실험 기능 (https://www.polymer-project.org/1.0/docs/devguide/styling.html#external-stylesheets)으로 지원됩니다.

(0.5에서 아직 업그레이드하지 않아서 시도하지 않았습니다.)