ballangddang ballangddang - 1 month ago 8
CSS Question

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

I'd like to make my styles

, and because I like using the
css directive, I wish I could do something like :

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

But if I do that :

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

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

Answer Source

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

Check this example:,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.