-
Notifications
You must be signed in to change notification settings - Fork 5
/
css-insertrule.html
47 lines (41 loc) · 2.05 KB
/
css-insertrule.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<title>Demo</title>
<style>
:root { font: 1rem/1.6 sans-serif; }
p { padding: 1rem; border-width: 5px; border-style: solid; }
</style>
<style class="textContent">p.textContent { border-color: lime; }</style>
<p class="textContent">This paragraph's styles are dynamically updated using <code>Node.prototype.textContent</code>. Note how its styles are editable using the Styles panel.</p>
<script>
{
const element = document.querySelector('style.textContent');
element.textContent = 'p.textContent { border-color: dodgerblue; }';
}
</script>
<style class="insertRule">p.insertRule { border-color: lime; }</style>
<p class="insertRule">This paragraph's styles are dynamically updated using <code>CSSStyleSheet.prototype.insertRule()</code>. Note how its styles are not editable using the Styles panel.</p>
<script>
{
const element = document.querySelector('style.insertRule');
const sheet = element.sheet;
console.assert(sheet.cssRules[0].styleMap.get('border-color').toString() === 'lime');
sheet.deleteRule(0);
console.assert(sheet.cssRules.length === 0);
sheet.insertRule('p.insertRule { border-color: dodgerblue; }');
console.assert(sheet.cssRules[0].styleMap.get('border-color').toString() === 'dodgerblue');
}
</script>
<style class="CSSStyleSheet">p.CSSStyleSheet { border-color: lime; }</style>
<p class="CSSStyleSheet">This paragraph's styles are dynamically updated using <code>CSSStyleSheet.prototype.replaceSync()</code>. Note how its styles are not editable using the Styles panel.</p>
<script>
{
const sheet = new CSSStyleSheet();
sheet.replaceSync('p.CSSStyleSheet { border-color: dodgerblue; }');
document.adoptedStyleSheets = [sheet];
}
</script>
<p class="css-module">This paragraph's styles are dynamically <code>import</code>ed from a CSS module <code>import sheet from './css-module.css' assert { type: 'css' };</code>.</p>
<script type="module">
import sheet from './css-module.css' assert { type: 'css' };
document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
</script>