聚合物模板和样式标签的关系
[英]Polymer template and style tag relation
问题描述
I know that Polymer recommends to use style tag inside template tag since v1.1 but supports both. 
我知道从v1.1开始，Polymer建议在template标签内使用style标签，但同时支持两者。 Can anyone tell me the advantages of doing so. 谁能告诉我这样做的好处。 If it is inertness then can you please give an example where keeping style tag outside template exposed it outside of shadow-dom 如果它是惰性的，那么请您举个例子，让样式标签保持在模板外部，使其暴露在shadow-dom外
1 个解决方案
解决方案1
0 已采纳 2016-06-16 13:57:26
The 1.1 release notes indicate performance reasons: 1.1发行说明指出了性能原因：
Previously, we recommended that a
<style>element should be placed inside an element's<dom-module>but outside of its template.<style>元素放置在元素的<dom-module>而不是其模板之外。 This is still supported, but we've now optimized placing styles within the template itself, so having the<style>tag outside of the template will be slower.<style>标记放在模板之外会更慢。
If I read the code correctly, this is Polymer's procedure for parsing CSS: 如果我正确阅读了代码 ，这是Polymer解析CSS的过程：
- Select child nodes that can contain CSS (including
<style>and<template>).选择可以包含CSS的子节点 （包括<style>和<template>）。 For each node:
对于每个节点： a.
一种。 If the node is <template>, recurse on the node (go to step 1).如果该节点是<template>，则在该节点上递归（转到步骤1）。b.
湾 Else if the node is <style>, remove the node (to prevent style leak), and then append the node's text to the string buffer.否则，如果节点为<style>，则删除该节点（以防止样式泄漏），然后将节点的文本附加到字符串缓冲区。c.
C。 Else if the node is <link rel="import" type="css">, append its imported text to the string buffer.否则，如果节点为<link rel="import" type="css">，则将其导入的文本附加到字符串缓冲区。- Return the string buffer. 返回字符串缓冲区。
If all styles are parsed using this procedure, I don't understand how the placement of <style> would affect performance (maybe I'm missing something). 如果使用此过程分析了所有样式，则我不了解<style>的位置将如何影响性能（也许我遗漏了一些东西）。
please give an example where keeping style tag outside template exposed it outside of shadow-dom
The <style> doesn't leak regardless of whether it's placed inside the <template> (because of step 2b above), as seen in the following demos. 不管是否将<style>放置在<template>内，它都不会泄漏（由于上述步骤2b），如以下示例所示。
<head> <base href="https://polygit.org/polymer+1.5.0/components/"> <script src="webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href="polymer/polymer.html"> </head> <body> <x-foo></x-foo> <div class="title">outside <x-foo> (should not be styled)</div> <dom-module id="x-foo"> <style> div.title { font-family: Arial; color: blue; } </style> <template> <div class="title">inside <x-foo></div> </template> <script> HTMLImports.whenReady(function() { Polymer({ is: 'x-foo' }); }); </script> </dom-module> </body>
<head> <base href="https://polygit.org/polymer+1.5.0/components/"> <script src="webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href="polymer/polymer.html"> </head> <body> <x-foo></x-foo> <div class="title">outside <x-foo> (should not be styled)</div> <dom-module id="x-foo"> <template> <style> div.title { font-family: Arial; color: blue; } </style> <div class="title">inside <x-foo></div> </template> <script> HTMLImports.whenReady(function() { Polymer({ is: 'x-foo' }); }); </script> </dom-module> </body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.