<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@webcomponents/shadycss@0.14.2/shadycss.min.css">
html
<div id="my-component">
</div>
html
<style>
:host {
display: block;
padding: 20px;
background-color: lightgray;
color: black;
}
@media (max-width: 600px) {
:host {
background-color: lightblue;
color: white;
}
}
</style>
script
var style = document.createElement('style');
style.textContent = ShadyCSS.prepareTemplate(style, '#my-component');
document.head.appendChild(style);
ShadyCSS.styleElement(document.getElementById('my-component'));
