用聚合物影响（“渗出”）阴影DOM的外部CSS [英] External CSS affecting ("bleeding" into) shadow DOM with Polymer
问题描述
我必须缺少一些东西，但我不能弄清楚什么。我有简单的自定义元素实现与聚合物：
I must be missing something, but I can't figure it out what. I have simple custom element implemented with 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>
然后在一个简单的页面中使用它：
I then use it in a simple page:
<!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影响的影子DOM中的元素。我甚至尝试在元素的定义中明确指定 shadowdom 属性，但结果是相同的。
The content of the element's inner div (with class="deepinside") is displayed in red. If I understand correctly, this shouldn't happen (see this doc). Note that I explicitly declared applyAuthorStyles: false in the element's constructor (it shouldn't be necessary, cause it is the default behavior). I don't understand why the external CSS is affecting an element in the shadow DOM. I've even tried specifying the shadowdom attribute explicitly in the element's definition, but the result is the same.
FWIW，我在OS X 10.7.5上运行Chrome版本31.0.1650.57。
FWIW, I'm running Chrome Version 31.0.1650.57 on OS X 10.7.5.
推荐答案
这是一个 Shadow DOM polyfill的已知限制。它在防止组件样式出血方面做得很好，但是它不会对其他方式做同样的事情。
This is an known limitation of the Shadow DOM polyfill. It does a pretty good job of preventing component styles from bleeding out, but it doesn't do the same for the other way around.
这里是一个用于你的用例的代码。它的工作原理是您打算在Chrome 33.0.1717.0 canary（其中Polymer不polyfill Shadow DOM），但不是在31.0.1650.57。
Here's a codepen for your use case. It works as you intend in Chrome 33.0.1717.0 canary (for which Polymer doesn't polyfill Shadow DOM), but not in 31.0.1650.57.
这篇关于用聚合物影响（“渗出”）阴影DOM的外部CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
