This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis
Today I learned that there is a :defined pseudo class in CSS. With a little bit of CSS magic using :not(:defined) one could style custom elements that are currently loaded. I love that!
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* style custom elements that are not defined yet */
:not(:defined) {
border: 2px solid red;
}
</style>
</head>
<body>
<some-elem>Hello world!</some-elem>
<script>
// assume that this code is loaded async
class SomeElem extends HTMLElement {}
customElements.define('some-elem', SomeElem);
</script>
</body>
</html>
If you want to check the spec definition of :defined is rather light though. ?
And if you want to see the selector in action I tweeted a short video showing it.
Reply to Stefan
This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis
Stefan Judis | Sciencx (2020-07-18T22:00:00+00:00) :defined can be used to target not yet defined custom elements (#tilPost). Retrieved from https://www.scien.cx/2020/07/18/defined-can-be-used-to-target-not-yet-defined-custom-elements-tilpost/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.