2

I'm trying to add a paper-button element inside a paper-dialog, but the styling doesn't get picked up, as it keeps adding the style-scope class to all of the dialog's child elements. It seems to do this on all elements/custom elements, as well as all classes (not just style-scope).

The problem is the styles all seem to use the selector below, so the actual styles aren't being represented properly.

:not([style-scope]):not(.style-scope)

I have a feeling I'm just missing something in the docs, because the demos don't have this class on them.

Thanks in advance!

Allan Kiezel
  • 115
  • 2
  • 7

2 Answers2

3

This is Cross-scope styling, i.e., where you want CSS rules to "pierce through the Shadow DOM encapsulation".

If you want to create reusable components then you should use custom CSS properties to expose just the rules that can be changed. If you're making components for your own use then External Stylesheets are a simpler approach:

<dom-module id="my-awesome-button">
    <!-- special import with type=css used to load remote CSS -->
    <link rel="import" type="css" href="my-awesome-button.css">

I would suggest you read the documentation I've linked to as it is difficult to give a good summary as there are a few different approaches, each with their pros and cons.

Craig Loftus
  • 205
  • 1
  • 7
  • Just as an update: since Polymer 1.1, this way of importing a CSS is now deprecated, see https://www.polymer-project.org/1.0/docs/devguide/styling.html#external-stylesheets Now, style-modules (https://www.polymer-project.org/1.0/docs/devguide/styling.html#style-modules) should be used. – Christof Oct 02 '15 at 10:38
  • I did have similar problems with `:not([style-scope]):not(.style-scope)` when tying to dynamically insert style into a polymer element at runtime. Maybe my workaround can help you out a little bit: See http://stackoverflow.com/questions/35149624/dynamically-inject-shared-styles-in-polymer-element-polymer-1-2-3 – phwa4563 Feb 04 '16 at 11:56
0

I had the similar issue. Please use this code in your custom element.

<script>
    (function () {
        Polymer({
            is: 'custom-element',                
            attached: function() {
               this.async(function() {
                  $('paper-button').removeClass('style-scope');
               });
            }
        });
    })();
</script>
user2588461
  • 1