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

我知道聚合物建议在v1.1以来使用 style tag内的 CC_1标记，但支持两者。谁能告诉我这样做的优势。如果是惰性的，那么您可以举个例子，在其中保留样式标签外部模板外将其曝光在Shadow-dom

之外

1.1发行说明表示性能原因：

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

如果我正确读取代码，这是聚合物解析CSS的过程：

选择可以包含CSS的子节点（包括<style>和<template>）。
对于每个节点：
a。如果节点为<template>，请在节点上重复（转到步骤1）。
b。否则，如果节点为<style>，请删除节点（以防止样式泄漏），然后将节点的文本附加到字符串缓冲区。
c。否则，如果节点为<link rel="import" type="css">，请将其导入的文本附加到字符串缓冲区。
返回字符串缓冲区。

如果使用此过程对所有样式进行解析，我不明白<style>的位置如何影响性能（也许我缺少某些内容）。

请举一个示例，将样式标签在外部模板外保持在影子 - 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

相关内容

最新更新

热门标签：