Question

My Polymer Web Components按预期在Firefox和Safari上运行;但是，在Google Chrome中，内容标记的呈现会覆盖自定义元素中模板的其余部分。

<polymer-element name="semantic-ui-button" attributes="type settings">
<template>      
<template if="{{ type == 'animated' }}">
    <div class="ui animated {{settings.attributes}} {{settings.animation}} button">
    <content>
          <div id="visibleContent" class="visible content"></div>
          <div id="hiddenContent" class="hidden content"></div>
    </content>
    </div>
</template>
....
</template>
</polymer-element>

创建元素时：

<semantic-ui-button type="animated">
    <div class="visible content">
        Face 1
    </div>
    <div class="hidden content">
        Face 2
    </div>
</semantic-ui-button>

结果是：

    <div class="visible content">
        Face 1
    </div>
    <div class="hidden content">
        Face 2
    </div>

而不是：

<div class="ui animated {{settings.attributes}} {{settings.animation}} button">
    <div class="visible content">
        Face 1
    </div>
    <div class="hidden content">
        Face 2
    </div>
</div>

为什么内容没有被包含在模板的其余部分中？

Answer 1

在原生ShadowDOM下，投影元素（由<content></content>选择的元素）仅投影到渲染树中。

在检查器中检查DOM时，元素似乎根本不会移动。这个概念允许开发人员拥有一致的DOM视图（孩子们不被吸尘到ShadowDOM中，他们会留在你放置它们的地方。）

在ShadowDOM Polyfill下，JavaScript会看到正确的逻辑版本的DOM，但开发人员工具会反映组成的dom 。换句话说，缺乏直接影响渲染树的能力，ShadowDOM Polyfill使用原生DOM树作为渲染树，并构造一个虚拟化 DOM，它呈现为API。

以下是Polymer中的一个复活节彩蛋：如果你打开一个控制台并输入sinspect()，它应该打开一个带有简单DOM检查器的新窗口，它应该反映（正确的）逻辑DOM。这是否有效取决于您的平台，您可能必须允许＆＃39;一个弹出窗口。

Polymer <content>无法在Chrome上运行？</content>

1 个答案: