Question

我知道Polymer建议在v1.1之后使用style标记内的template标记，但同时支持两者。谁能告诉我这样做的好处。如果它是惰性的，那么请你举一个例子，保持模板外面的样式标签将它暴露在阴影之外

Answer 1

1.1 release notes表示效果原因：

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

如果我正确读取code，这是Polymer解析CSS的过程：

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

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

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

℃。否则，如果节点为<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

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

1 个答案: