I'm trying to get a better understanding of using mixins in Polymer 2: Here is my sample:
<dom-module id="x-test">
<template>
<custom-style>
<style is="custom-style">
html {
--center-on-screen: {
left: 50%;
top: 50%;
position: absolute;
border: solid 1px red;
};
}
</style>
</custom-style>
<style>
.signal {
border-radius: 30px;
height: 30px;
width: 30px;
@apply --center-on-screen;
}
</style>
<div class="signal"></div>
</template>
<script>
'use strict'
class XTest extends Polymer.Element {
static get is() {
return 'x-test';
}
static get properties() {
return {
}
}
static get observers() {
return [];
}
constructor() {
super();
}
ready() {
super.ready();
}
connectedCallback() {
super.connectedCallback();
}
connectedCallback() {
super.connectedCallback();
}
}
customElements.define(XTest.is, XTest);
</script>
</dom-module>
when the code @apply --center-on-screen; in the class, I would expect the div to have the color red and be centered on the screen. I have verified it because I had all the code in --center-on-screen in the class .signal. I moved it into --center-on-screen just for testing purposes. If anyone can advise me on what i'm doing incorrectly.
**Update **
When I move --center-on-screen into :host then it works. So it looks like this
<style>
:host {
--center-on-screen: {
left: 50%;
top: 50%;
position: absolute;
border: solid 1px red;
}
}
.signal {
border-radius: 30px;
height: 30px;
width: 30px;
border: solid 1px red;
@apply --center-on-screen;
}
</style>
Try to include cd shady css mixin:
<link rel="import" href="../../bower_components/shadycss/apply-shim.html">
CSS custom properties are becoming widely supported, CSS mixins remain a proposal. So support for CSS mixins has been moved to a separate shim that is optional for 2.0 class-style elements. For backwards compatibility, the polymer.html import includes the CSS mixin shim. Class-style elements must explicitly import the mixin shim.
Ref: https://www.polymer-project.org/2.0/docs/upgrade#class-based-elements-import-the-css-mixin-shim