7 ms·
> Each of these books is a custom element, or “web component”. I always wondered about custom 'web components'. Is it safe to do something like this? -->
by ______- 5y ago
> Each of these books is a custom element, or “web component”.
I always wondered about custom 'web components'. Is it safe to do something like this? -->
<style>
red{color:red}
</style>
<red>I should be red</red>
It works in latest Firefox. It feels weird being able to create arbitrary custom elements like that!
- dqv 5y agoIIRC that's a Firefox quirk and doesn't work in every browser.
- ______- 5y agoDo you know what the quirk is called? Is there a blogpost detailing this strange method? Is there any mention of it in the web standards sites?
- lolinder 5y agoI don't believe it's a quirk. Browsers are supposed treat tags they don't recognize basically the same as a <div> (or some other reasonable default presentation). It's intentionally designed that way for forward compatibility. We rely on this behavior when we provide some content inside an <object> tag for browsers that don't support it.
- e111077 5y agoHTMLUnknownElement https://developer.mozilla.org/en-US/docs/Web/API/HTMLUnknownElement https://developer.mozilla.org/en-US/docs/Web/API/HTMLUnknown...
- runarberg 5y agoFun fact: <blink> is an HTMLUnknownElement. What GGGP did is essentially the same as: blink { animation: blink 1s steps(2, jump-none) infinite; } @keyframes blink { to { opacity: 0; } } Now when you write <blink> in your HTML you will essentially get an HTMLUnknownElement with the specific style of blinking every ½ second.
- dqv 5y agoI guess the other browsers caught up because I remember trying it in a few different browsers after doing it in Firefox and it only worked in Firefox.
- deleted 5y ago[deleted]
- runarberg 5y agoShort answer: No. There is no guarantee that a future HTML spec will include a standard element <red> which will affect yours. For your element to be a legal custom element it must include a hyphen (e.g. <my-red>). Longer answer: What you did here is a simple CSS selector using a tag matcher. Each tag with the name "red" will be matched and styles applied. If you want some custom script applied when this kind of element is created, attached, destroyed, etc. you must create a class for it and register it to the custom element registry[1]: window.customElements.define( "my-red", class extends HTMLElement { // ... }, ) Now you have a custom element. But when people normally speak of web components they are talking about scoped elements, which means styles and idrefs are encapsulated. For that you must attach a shadow DOM[2] to your element: class MyRed extends HTMLElement { constructor() { super(); const shadowRoot = this.attachShadow(); const style = document.createElement("style"); const slot = document.createElement("slot"); style.textContent = ":host { color: red; }" shadowRoot.append(style, slot); } } 1: https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry https://developer.mozilla.org/en-US/docs/Web/API/CustomEleme... 2: https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow https://developer.mozilla.org/en-US/docs/Web/API/Element/att...
- ______- 5y agoThanks for clarifying
- shakna 5y agoYes, that is safe. It was introduced in 2014. I believe it should work in most browsers. (Rough testing shows it working for me in Firefox, Chrome, Safari).
- ______- 5y agoIs there some page/article/reference to that method that you know of?
- shakna 5y agoCustom Elements [0][1] is the specification that came after the implementation was already gaining use. [0] https://www.w3.org/TR/custom-elements/ https://www.w3.org/TR/custom-elements/ [1] https://html.spec.whatwg.org/multipage/scripting.html#custom-elements https://html.spec.whatwg.org/multipage/scripting.html#custom...
- ______- 5y agoThank you!