ballangddang ballangddang - 3 months ago 14
CSS Question

@apply and a style dom-module won't work in Polymer 2.0

I'd like to make my styles

dom-module
, and because I like using the
@apply
css directive, I wish I could do something like :

<dom-module id="my-styles">
<template>
<style>
html {
--big-title: {
font-size: 1.3em;
text-transform: UPPERCASE;
}
}
</style>
</template>>
</dom-module>


But if I do that :

<dom-module id="my-element">
<template>
<style include="my-styles">
h1 {
@apply --big-title;
}
</style>
...
</template>
</dom-module>


Sadly this won't work. I am not sure why. My question is Can I use the @apply directive in conjunction with the styling
dom-module
solution ?

Answer Source

You should instead assign your properties to :host, I would say.

Check this example: http://jsbin.com/dikacewulu/2/edit?html,output

Here, :host refers to the element including the style (so my-element). If you really wanted those rules to be available on html, you could use :root.