聚合物模板和样式标签关系答案

【问题标题】：Polymer template and style tag relation聚合物模板和样式标签关系
【发布时间】：2016-06-16 10:27:08
【问题描述】：

我知道 Polymer 从 v1.1 开始建议在 template 标签内使用 style 标签，但两者都支持。谁能告诉我这样做的好处。如果它是惰性的，那么您能否举一个示例，将样式标签保留在模板之外将其暴露在 shadow-dom 之外

【问题讨论】：

标签： polymer polymer-1.0

【解决方案1】：

1.1 release notes 表示性能原因：

以前，我们建议应将<style> 元素放置在元素的<dom-module> 内，但在其模板之外。这仍然受支持，但我们现在优化了在模板本身内放置样式，因此在模板外部放置 <style> 标记会更慢。

如果我正确阅读了code，这是 Polymer 解析 CSS 的程序：

Select child nodes 可以包含 CSS（包括 <style> 和 <template>）。
对于每个节点：

一个。如果节点是<template>，则在节点上递归（转到步骤1）。

b.否则，如果节点是<style>，则删除节点（以防止样式泄漏），然后将节点的文本附加到字符串缓冲区。

c。否则，如果节点是<link rel="import" type="css">，则将其导入的文本附加到字符串缓冲区。
返回字符串缓冲区。

如果使用此过程解析所有样式，我不明白<style> 的放置会如何影响性能（也许我遗漏了一些东西）。

请举一个例子，将样式标签保留在模板之外，将其暴露在 shadow-dom 之外

<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 &lt;x-foo&gt; (should not be styled)</div>

  <dom-module id="x-foo">
    <style>
      div.title {
        font-family: Arial;
        color: blue;
      }
    </style>
    <template>
      <div class="title">inside &lt;x-foo&gt;</div>
    </template>
    <script>
      HTMLImports.whenReady(function() {
        Polymer({
          is: 'x-foo'
        });
      });
    </script>
  </dom-module>
</body>

^codepen

<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 &lt;x-foo&gt; (should not be styled)</div>

  <dom-module id="x-foo">
    <template>
      <style>
        div.title {
          font-family: Arial;
          color: blue;
        }
      </style>
      <div class="title">inside &lt;x-foo&gt;</div>
    </template>
    <script>
      HTMLImports.whenReady(function() {
        Polymer({
          is: 'x-foo'
        });
      });
    </script>
  </dom-module>
</body>

^codepen

【讨论】：