Polymer 2.0 custom style property is not working under dom-module

问题

I have upgraded polymer project to 2.0 version. After that some css class is missing from div.

There is a link to iron-flex-layout.html from my-home.html

<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">

And in my-home.html page have some styles like following:

<dom-module id="my-home">
<template>
<style is="custom-style">
.flex-vertical {
  @apply --layout-vertical;
  height: 100vh;
}

.flexchild-vertical {
  @apply --layout-flex;
  @apply --layout-horizontal;
}
</style>
</template>
</dom-module>

These styles are calling from iron-flex-layout.html

--layout-vertical
--layout-flex
--layout-horizontal

But its not loading into my output. Here is the screenshots from my browser:

Old version:

Upgraded version:

I think the problem may because of that there is a #shadow-root generated.

Can I change style links / html links or any other in my code?

回答1:

Yes! Got the answer from here: https://www.polymer-project.org/2.0/docs/upgrade#class-based-elements-import-the-css-mixin-shim

It is the version problem with the iron-flex-layout. I just updated it and everything is fine now.

The latest version (2.0) have a <custom-style> object wrapping whole the styles inside iron-flex-layout.html

Here is the latest version: https://github.com/PolymerElements/iron-flex-layout

来源：https://stackoverflow.com/questions/46826321/polymer-2-0-custom-style-property-is-not-working-under-dom-module