在Polymer 2中使用CSS mixin覆盖内联样式

Question

Is there a way to override the inline style of a component in Polymer 2 with a CSS mixin ?

In Polymer 1, I had a similar code as below in my component to do that and it is working fine (see #1 image):

<style>
    paper-menu-button {
        display: block;

        --paper-menu-button-dropdown: {
            position: relative !important;
            top: auto !important;
            left: auto !important;
            display: block;
        };

        --paper-menu-button-content: {
            max-width: none !important;
            max-height: none !important;
            display: block;
        };
    }
</style>

But with Polymer 2, it is not working anymore (see #2 image).

JS bin for Polymer 2.

1. Polymer 1 : CSS:

Output:

---

2. Polymer 2: CSS:

Output:

Thanks!

Answer 1

Add width:100%; in --paper-menu-button-dropdown .

Working JS Bin .

Also, notice that I have changed iron-icon.html to iron-icons.html for the arrow icon.