聚合物2.0自定义样式属性不能在dom模块下工作 [英] Polymer 2.0 custom style property is not working under dom-module

问题描述

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

my-home.html iron-flex-layout.html >

 < link rel =importhref =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; 
身高：100vh; 
} 
 
 .flexchild-vertical {
 @apply --layout-flex; 
 @apply --layout-horizo​​ntal; 
} 
< / style> 
< / template> 
< / dom-module> 
  

这些样式来自 iron-flex-layout.html

   -  layout-vertical 
 --layout-flex 
  - 布局 - 水平
  

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

旧版本：

升级版本：

我认为这个问题可能是因为有一个＃shadow-root 生成。

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

解决方案 DIV>

是的！从这里得到答案： 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中的所有样式

以下是最新版本：< a href =https://github.com/PolymerElements/iron-flex-layout =nofollow noreferrer> https://github.com/PolymerElements/iron-flex-layout

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?

解决方案

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

这篇关于聚合物2.0自定义样式属性不能在dom模块下工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！