<button type="button" data-toggle="modal" data-target="#a"></button>
<div id="foo" class="foo a b"></div>
<component data-classes="b g foo"></component>
<code>
// See: http://example.com/#a
// See: files/#b
</code>
<style>
#a {}
.b, .g, .foo {}
.h::after {
content: "./path/#b";
}
.h::before {
content: "./path/#foo";
}
#bar {}
[id="bar"] {}
</style>
<script>
a.classList.add(() => {
if (foo) return "d";
else if (bar) return "e d";
else if (baz) return "f";
});
document.getElementById('baz');
document.getElementsByClassName('foo');
document.querySelector('#baz');
b.classList.add('is-active', 'c');
</script>
<div style="mask-image: url(foo.svg#foo)"></div>
<div style="mask-image: url('foo.svg#bar')"></div>