Polymer自定义元素：与进口重用CSS

我似乎无法使<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.html包含此：

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

如果不是进口我加载一个简单的旧的链接指向bootstrap.css那么它的工作原理，但是，如果我也用bootstrap.css的指数，该网站将加载两次bootstrap.css

这是Web组件的限制吗？这是聚合物的问题吗？

谢谢！

弗兰

来源

2014-03-29 franleplant

不能使用导入模板里面今天加载CSS范围限定在你的元素，这是已知不工作。

您最初的想法是使用simple old link pointing to bootstrap.css是一种理想的方式，这个概念是用户代理应该足够聪明以共享该CSS。

我们认为您今天偶尔会看到一个浏览器错误的双重加载。如果你可以暂时生活，那就是要走的路。不幸的是，bootstrap.css不是用范围化的CSS来编写的，所以它比自定义的CSS更能放大这个问题。

来源

2014-03-29 20:15:14

感谢您的答案。它是一种苦涩的甜蜜回答。浏览器众所周知不提供此功能，所以我期望导入和Web组件提供这种新的可用性。为什么这不是在Polymer中实现的？这是Web组件的限制吗？ – franleplant

'浏览器是众所周知的不提供这个功能'：他们确实提供这个功能，它通常不是很好的实现。我们正在努力解决这个问题。 '进口和网络组件提供这种新功能：“这是相同的答案，”平台应该这样做“。 '为什么不实施聚合物？'：你可以填充的东西是有限的。 '这是一个Web组件限制'：我不明白这个问题。 Web Components希望浏览器支持样式共享（良好）。所以，它不能很好*今天*是一个浏览器错误（或待办事项）。 –

不错，现在我很满意我的回答。非常感谢您的宝贵时间。我抓住机会向聚合物这个伟大的事物表示感谢！ – franleplant

作为实验性功能（https://www.polymer-project.org/1.0/docs/devguide/styling.html#external-stylesheets）现在支持使用HTML导入来加载外部CSS 聚合物1.0。

（还没有试过自己，因为我还没有从0.5升级:)）

来源

2015-06-07 16:14:38 joaoguerravieira

Polymer自定义元素：与进口重用CSS

回答

相关问题