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>

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.

What am I missing?

FWIW, I'm running Chrome Version 31.0.1650.57 on OS X 10.7.5.

回答1:

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.

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.

来源：https://stackoverflow.com/questions/20160798/external-css-affecting-bleeding-into-shadow-dom-with-polymer

标签

javascript

html

css

polymer