selector {
property1: value1;
property2: value2;
}
selector {
--variable-name: value;
}
selector {
property: var(--variable-name);
}
.selector1 {
property1: value1;
}
.selector2 {
@apply --selector1;
property2: value2;
}
:host {
property: value;
}
@media screen and (max-width: 600px) {
selector {
property: value;
}
}
html
<script src="path/to/shadycss.min.js"></script>
script
const template = document.createElement('template');
template.innerHTML = `
`;
ShadyCSS.prepareTemplate(template, 'custom-element');
script
const element = document.createElement('custom-element');
document.body.appendChild(element);
ShadyCSS.styleElement(element);
script
const shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `
`;
ShadyCSS.applyStyleToNode(shadowRoot);
