我一定遗漏了什么,但我不知道是什么。我用聚合物实现了简单的自定义元素:
<polymer-element name="test-elem">
<template>
<content></content>
<div id="container">
<div class="deepinside">
TECK ... CHEST
</div>
</div>
</template>
<script>
Polymer('test-elem', {
applyAuthorStyles: false,
});
</script>
</polymer-element>
然后我在一个简单的页面中使用它:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<script src="libs/polymer.min.js"></script>
<link rel="import" href="test-elem.html">
<style>
.deepinside { color: red; }
</style>
</head>
<body>
<test-elem>Hi</test-elem>
</body>
</html>
元素内部div
(带class="deepinside"
)的内容显示为红色。如果我理解正确,这不应该发生(请参阅此文档)。请注意,我在元素的构造函数中显式声明了applyAuthorStyles: false
(这应该不是必需的,因为这是默认行为)。我不明白为什么外部CSS会影响shadow DOM中的一个元素。我甚至尝试在元素的定义中显式指定shadowdom
属性,但结果是一样的。
我错过了什么?
FWIW,我在OS X 10.7.5上运行Chrome版本31.0.1650.57。
这是Shadow DOM polyfill的一个已知限制。它在防止零部件样式流失方面做得很好,但在其他方面却做不到。
这是一个用于您的用例的代码笔。它在Chrome 33.0.1717.0金丝雀(Polymer不会对Shadow DOM进行聚合填充)中按您的意愿工作,但在31.0.1650.57中则不然。