Clever Geek Handbook

Shadow DOM CSS Style Outside Doesn't Work in Google Chrome

I am using polymer

paper-action-dialog

it paper-button

on my webpage too. There are two buttons in the Paper Handling dialog box. I want to style these paper buttons externally (main html). I wrote the styles CSS

in notation shadow DOM

. These styles work fine in the Firefox browser, but don't work correctly in the browser Google-chrome

. What should I do to get this working in chrome?

Check

<paper-action-dialog class="ask" backdrop autoCloseDisabled=true heading="Heading!">
  <p>This is the sample paragraph.</p>
  <paper-button  autofocus class="test" affirmative>Edit</paper-button>
  <paper-button  autofocus class="test" affirmative>OK</paper-button>
</paper-action-dialog>

CSS

paper-action-dialog::shadow paper-button.test{
            font-size: small;
            height: 100%;
            padding-top: 5px;
            width: 100%;
            margin: 0 0;
}

EDIT

The answer lies in the comment:

The selector must be overlay-host::shadow paper-button.test

+3


source to share


1 answer


You should examine the DOM element ( F12or context menu element). The HTML for the actual dialog is appended somewhere to the body tag not within <paper-action-dialog>

. You must adapt the selector accordingly.



+2


source






More articles:


All Articles