Zewnętrzny CSS wpływający („wykrwawia” się) na cieńszy DOM za pomocą polimeru

Question

Nov 23, 2013, 10:41 AM

Zewnętrzny CSS wpływający („wykrwawia” się) na cieńszy DOM za pomocą polimeru

Tęsknię za czymś, ale nie mogę tego zrozumieć. Mam prosty element niestandardowy zaimplementowany z polimerem:

<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>

Następnie używam go na prostej stronie:

<!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>

Zawartość wewnętrznego elementudiv (zclass="deepinside") jest wyświetlany na czerwono. Jeśli dobrze rozumiem, to nie powinno się zdarzyć (patrzten dokument). Uwaga, którą wyraźnie zadeklarowałemapplyAuthorStyles: false w konstruktorze elementu (nie powinno to być konieczne, ponieważ jest to zachowanie domyślne). Nie rozumiem, dlaczego zewnętrzny CSS wpływa na element w cieniowym DOM. Próbowałem nawet określićshadowdom atrybut jawnie w definicji elementu, ale wynik jest taki sam.

czego mi brakuje?

FWIW, używam Chrome w wersji 31.0.1650.57 na OS X 10.7.5.