Check out this amazing resource from HTML5 Rocks about the process of creating custom elements and styling them.
To create a custom element, you can use the following code:
var XFoo = document.registerElement('x-foo', {
prototype: Object.create(HTMLElement.prototype)
});
Now, you can use x-foo in your body like this:
<body>
<x-foo>Hello</x-foo>
</body>
The next question is: how to style the <x-foo /> element in the body using CSS without adding any classes or ids?
According to the article, it can be done like this:
:host(x-foo) {
color: red;
}