Polymer模板与样式标签关系

Question

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

之外

Answer 1

1.1 release notes表示性能原因：

Previously, we recommended that a <style> element should be placed inside an element's <dom-module> but outside of its template. 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.

如果我没看错 code，这是 Polymer 解析 CSS:

的过程

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

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

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

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

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

please give an example where keeping style tag outside template exposed it outside of shadow-dom

无论是否将 <template> 放在 <template> 中，<style> 都不会泄漏（因为上面的步骤 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

Polymer模板与样式标签关系

Polymer template and style tag relation

polymer

polymer-1.0