Polymer 2.0 自定义样式属性在 dom-module 下不起作用答案

【问题标题】：Polymer 2.0 custom style property is not working under dom-modulePolymer 2.0 自定义样式属性在 dom-module 下不起作用
【发布时间】：2018-03-31 06:44:05
【问题描述】：

我已将聚合物项目升级到 2.0 版本。之后，div 中缺少一些 css 类。

my-home.html

中有一个指向 iron-flex-layout.html 的链接

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

并且在 my-home.html 页面中有一些样式如下：

<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>

这些样式是从 iron-flex-layout.html

调用的

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

但它没有加载到我的输出中。这是我浏览器的截图：

旧版本：

升级版：

我认为问题可能是因为生成了#shadow-root。

我可以在我的代码中更改样式链接/html 链接或任何其他内容吗？

【问题讨论】：

标签： html css polymer-2.x

【解决方案1】：

是的！从这里得到答案：https://www.polymer-project.org/2.0/docs/upgrade#class-based-elements-import-the-css-mixin-shim

这是iron-flex-layout 的版本问题。我刚刚更新了它，现在一切都很好。

最新版本 (2.0) 有一个 <custom-style> 对象将整个样式包装在 iron-flex-layout.html 中

【讨论】：