聚合物模板和樣式標簽的關系

Question

我知道從v1.1開始，Polymer建議在template標簽內使用style標簽，但同時支持兩者。 誰能告訴我這樣做的好處。 如果它是惰性的，那么請您舉個例子，讓樣式標簽保持在模板外部，使其暴露在shadow-dom外

Answer 1

1.1發行說明指出了性能原因：

以前，我們建議將<style>元素放置在元素的<dom-module>而不是其模板之外。 仍然支持此功能，但是我們現在已經優化了將樣式放置在模板本身內的方法，因此將<style>標記放在模板之外會更慢。

如果我正確閱讀了代碼，這是Polymer解析CSS的過程：

選擇可以包含CSS的子節點（包括<style>和<template> ）。
對於每個節點：
一種。 如果該節點是<template> ，則在該節點上遞歸（轉到步驟1）。
灣 否則，如果節點為<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

聚合物模板和樣式標簽的關系

問題描述

1 個解決方案

解決方案1
0 已采納 2016-06-16 13:57:26

聚合物模板和樣式標簽的關系

問題描述

1 個解決方案

解決方案1 0 已采納 2016-06-16 13:57:26

解決方案1
0 已采納 2016-06-16 13:57:26