styling inside a paper-dialog

55 views
Skip to first unread message

Eric Eslinger

unread,
Apr 23, 2015, 7:33:33 PM4/23/15
to polymer-dev
Hey polymer-peeps.

I have a problem with getting styles to attach to content in a paper-dialog. In particular, I want to do stuff like:

<paper-dialog>
  <div class="potato">stuff</div>
</paper-dialog>

The problem is that unlike pretty much every other paper element that does projection (core-header-panel, core-drawer-panel, etc), the stuff that is selected to go inside the paper dialog's presentation is deep in some shadow dom and doesn't inherit class attributes from the light dom.

Is there some simple-overlook issue I'm missing here? Everything else was a bit tricky, but not an issue really, but I just can't get paper-dialogs to grab classes from outside. Between that and the strange tendency for core-overlay to stick around sometimes when closing a paper-dialog, I'm basically stuck with my own hand-rolled dialog popups for the time being.

e

Eric Eslinger

unread,
Apr 23, 2015, 7:41:54 PM4/23/15
to polymer-dev
ah, just answering myself here for posterity:

If you set layered="false", you won't lose access to the light DOM's css class selectors and so forth. Your dialog won't be guaranteed to render on top of all other dialogs and other page content, but provided you're not going nuts with z-indexes, you are safe. Beats having to write /deep/ (or is it ::shadow or >>> ) selectors for the stuff I want to shove into a dialog.

e
Reply all
Reply to author
Forward
0 new messages