在Polymer 2.0中,@apply和style dom-module不起作用的原因是它们在Polymer 2.0中已被废弃。这是因为Polymer 2.0引入了新的CSS Custom Properties(CSS变量)的概念,取代了@apply和style dom-module。
CSS Custom Properties允许开发者在CSS中定义自己的变量,并在整个应用程序中重复使用。这样可以更灵活地管理样式,并且可以在运行时动态修改这些变量的值。
在Polymer 2.0中,可以通过使用CSS Custom Properties来定义样式,而不再需要使用@apply和style dom-module。可以在Polymer元素的样式中使用var()函数来引用这些自定义变量。
下面是一个示例:
<dom-module id="my-element">
<template>
<style>
:host {
--primary-color: blue;
}
.my-class {
color: var(--primary-color);
}
</style>
<div class="my-class">Hello, Polymer!</div>
</template>
<script>
class MyElement extends Polymer.Element {
static get is() { return 'my-element'; }
}
customElements.define(MyElement.is, MyElement);
</script>
</dom-module>
在上面的示例中,我们定义了一个名为my-element
的自定义元素,并在其样式中定义了一个名为--primary-color
的自定义变量。然后,我们在.my-class
选择器中使用var(--primary-color)
来引用这个自定义变量。
这样,我们就可以在Polymer 2.0中使用CSS Custom Properties来实现样式的复用和动态修改,而不再需要使用@apply和style dom-module。
关于Polymer 2.0的更多信息和使用方法,你可以参考腾讯云的Polymer相关产品和文档:
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云