style.dss
Version:
dynamic style sheets
94 lines (79 loc) • 1.86 kB
HTML
<title>DSS Test</title>
<script type=module>
const sleep = ms => new Promise(res => setTimeout(res,ms));
import {restyleElement, initializeDSS, restyleAll, setState} from './index.js';
start();
start();
start();
async function start() {
const state = {
color: 'red'
};
initializeDSS(state, {
redStyle(el, state) {
return `
article p {
color: ${state.color || 'red'};
}
`;
},
basicStyle(el, state) {
return `
article {
border: thick solid blue;
}
article p {
font-style: italic;
}
`;
},
coolStyle(el, state) {
return `
article {
background: ${state.hotness == 'nice'? 'pink' : 'black'};
color: lime;
border: medium solid white;
}
article h1 {
font-size: 20pt;
text-decoration: underline;
}
article p {
font-weight: bold;
}
`;
},
});
await sleep(1000);
setState({
color: 'purple'
});
restyleAll();
await sleep(1000);
setState({
hotness: 'nice',
});
restyleElement(document.querySelector('.whatever'));
await sleep(1000);
restyleAll();
}
</script>
<style>
body h1 {
font-variant: italic;
color: red;
}
</style>
<article class=whatever stylist="basicStyle redStyle">
<h1>Cool this is basic style article</h1>
<p>Some paragraphs in basic style</p>
</article>
<article class=awesome stylist=coolStyle>
<h1>Awesome this is cool style</h1>
<p>A paragraph in cool style</p>
</article>
<article class=awesome stylist="coolStyle redStyle">
<h1>Awesome this is cool style</h1>
<p>A paragraph in cool style</p>
</article>