我一定是遗漏了什么，但我不知道是什么。我有使用 polymer 实现的简单自定义元素:
<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")的内容显示为红色。如果我理解正确，这不应该发生(参见 this doc )。请注意，我在元素的构造函数中显式声明了 applyAuthorStyles: false(这不是必需的，因为这是默认行为)。我不明白为什么外部 CSS 会影响影子 DOM 中的元素。我什至尝试在元素的定义中明确指定 shadowdom 属性，但结果是一样的。
我错过了什么？
FWIW，我在 OS X 10.7.5 上运行 Chrome 版本 31.0.1650.57。
最佳答案
这是一个 known limitation of the Shadow DOM polyfill .它在防止组件样式流出方面做得很好，但在其他方面却没有同样的效果。
Here's适用于您的用例的代码笔。它在 Chrome 33.0.1717.0 canary(Polymer 不会填充 Shadow DOM)中按照您的预期工作，但在 31.0.1650.57 中则不然。
关于javascript - 影响 ("bleeding"的外部 CSS 成)shadow DOM with Polymer，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20160798/