Polymer 聚合物模板与样式标记关系
我知道Polymer建议从v1.1开始在Polymer 聚合物模板与样式标记关系,polymer,polymer-1.0,Polymer,Polymer 1.0,我知道Polymer建议从v1.1开始在模板中使用样式标记,但支持两者。谁能告诉我这样做的好处吗。如果它是惰性的,那么您可以举一个例子,将样式标记保留在模板之外,将其暴露在阴影dom之外,说明性能原因: 以前,我们建议将元素放置在元素的内,但不在其模板外。这仍然是受支持的,但我们现在已经优化了在模板本身中放置样式,因此将标记放在模板之外会更慢 如果我读对了,这是Polymer解析CSS的过程: 可以包含CSS(包括和) 对于每个节点: a。如果节点是,则在节点上递归(转到步骤1) b。否则,如果
模板中使用样式
标记,但支持两者。谁能告诉我这样做的好处吗。如果它是惰性的,那么您可以举一个例子,将样式标记保留在模板之外,将其暴露在阴影dom之外,说明性能原因:
以前,我们建议将
元素放置在元素的
内,但不在其模板外。这仍然是受支持的,但我们现在已经优化了在模板本身中放置样式,因此将
标记放在模板之外会更慢
如果我读对了,这是Polymer解析CSS的过程:
可以包含CSS(包括
和
)
对于每个节点:
a。如果节点是
,则在节点上递归(转到步骤1)
b。否则,如果节点是
,请删除该节点(以防止样式泄漏),然后将该节点的文本附加到字符串缓冲区
c。否则,如果节点是
,则将其导入的文本附加到字符串缓冲区
返回字符串缓冲区
如果使用此过程分析所有样式,我不理解
的放置将如何影响性能(可能我遗漏了一些东西)
请给出一个示例,其中将样式标记保留在模板之外会将其暴露在阴影dom之外
无论
是否放在
内,都不会泄漏(因为上面的步骤2b),如以下演示所示
x-foo外部(不应设置样式)
部门名称{
字体系列:Arial;
颜色:蓝色;
}
x-foo内部
HTMLImports.whenReady(函数(){
聚合物({
是:“x-foo”
});
});