Custom pseudo-elements cannot be targeted outside shadow dom #475

peterhorne · 2014-04-18T13:15:41Z

The following test case creates a custom element which renders Hello, <span pseduo="x-name">Polymer</span>. I'm trying to target the custom pseudo-element x-name using the CSS selector span::x-name in the parent document but it doesn't result in a match.

I've tested the following in Chrome 34 & 36.

<!doctype html>
<html>
    <head>
        <script src="bower_components/platform/platform.js"></script>

        <style type="text/css">
            span::x-name {
                color: green;
            }
        </style>
    </head>

    <body>
        <link rel="import" href="/bower_components/polymer/polymer.html">
        <polymer-element name="my-example">
            <template>
                Hello, <span pseudo="x-name">Polymer</span>
            </template>

            <script>
                Polymer('my-example', {
                    ready: function() {}
                })
            </script>
        </polymer-element>

        <my-example></my-example>
    </body>
</html>

The text was updated successfully, but these errors were encountered:

robdodson · 2014-04-18T13:48:20Z

pseudo is no longer supported in Shadow DOM. You want something that looks like this:

<style shim-shadowdom>
  my-example::shadow .my-name {
    color: red;
  }
</style>
<polymer-element name="my-example">
  <template>
    Hello, <span class="my-name">Polymer</span>
  </template>
  <script>
    Polymer('my-example', {
      ready: function() {}
    })
  </script>
</polymer-element>
<my-example></my-example>

http://jsbin.com/sobov/2/edit

Note the use of shim-shadowdom for legacy browsers and ::shadow to pierce the shadow boundary.

peterhorne · 2014-04-18T14:06:18Z

Oh right, thanks!

robdodson closed this as completed Apr 18, 2014

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Custom pseudo-elements cannot be targeted outside shadow dom #475

Custom pseudo-elements cannot be targeted outside shadow dom #475

peterhorne commented Apr 18, 2014

robdodson commented Apr 18, 2014

peterhorne commented Apr 18, 2014

Custom pseudo-elements cannot be targeted outside shadow dom #475

Custom pseudo-elements cannot be targeted outside shadow dom #475

Comments

peterhorne commented Apr 18, 2014

robdodson commented Apr 18, 2014

peterhorne commented Apr 18, 2014