Created
December 15, 2022 19:34
-
-
Save nolanlawson/0e540f5bb5d10d33d505f57e84ee6840 to your computer and use it in GitHub Desktop.
:host pseudo with selector list
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>:host pseudo with selector list</title> | |
</head> | |
<body> | |
<x-cmp class="foo"></x-cmp> | |
<script> | |
customElements.define('x-cmp', class extends HTMLElement { | |
constructor() { | |
super() | |
this.attachShadow({ mode: 'open' }).innerHTML = ` | |
<style> | |
:host(.foo, .bar) { color: red }"; | |
</style> | |
<h1> | |
Hello world | |
</h1> | |
` | |
} | |
}) | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment