Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

You can make up HTML tags

maurycyz.com

Post reply on HN
Print view View original

121–130 of 202 posts

Re: You can make up HTML tags

#121

Post by WickyNilliams »

g0wda wrote: post #28
hunterloftis wrote: post #23

Earlier quoted context omitted.

> It'd be perfect it just had a switch to inherit everything the page already has. It does! https://lit.dev/docs/components/shadow-dom/ > By default, Lit renders into shadow DOM. This carries benefits like encapsulation (including the style encapsulation you mention). If you prefer global styles, you can render into light DOM instead with that one-line switch. However, shadow DOM is required for slotting (composing)…

oh nice! I didn't know that you can just make it use light dom. protected createRenderRoot() { return this; } And that's what it takes! I like using tailwind/utility classes so for the styles I'd need to have layers of compiled css files rather than one giant one.

The major downside of using light DOM is that elements cannot compose neatly since there's no delineating between what the component itself rendered and child content.

When you need to re-render your component, how does the component know not to replace the child content you rendered, Vs the child content it rendered into the light DOM. That's why the shadow DOM and slots were necessary, because then there's no intermingling of your content Vs the component's

This may not be a problem if you don't intend to compose your components. But if you do you will hit limits quickly

Re: You can make up HTML tags

#122

Post by senfiaj »

cubefox wrote: post #80

I was forced to use this years ago because there is only a :nth-of-type selector, but no :nth-of-class. So whenever you need nth-of-class, switch to made-up tags and use nth-of-type. (A tag is a type.)

There is N-th child selector with filter, for example you can write :nth-child(3 of .red)

https://waspdev.com/articles/2025-06-29/css-features-web-dev...

Re: You can make up HTML tags

#123

Post by WickyNilliams »

troupo wrote: post #120
WickyNilliams wrote: post #119

Earlier quoted context omitted.

What makes custom elements good is inrerop. I can use them in react, Vue, angular, svelte, solid, or just plain ol' server rendered html. I can switch out the internals entirely for a WC lib, or not, with nobody knowing or caring. This is a unique advantage to WCs. And it's such a compelling advantage that it makes almost all the downsides tolerable. At least if you are in a position where your component might be use…

> At least if you are in a position where your component might be used in many places. I think someone once called them leaf components, and on this I agree.

They don't need to be leaf components to still have this strength. I've worked with design systems which have a component near the root which defines sidebar, header etc slots. This still works nicely with react, Vue etc

But I agree they tend to be better suited as "leafier" components

Re: You can make up HTML tags

#124

Post by eqvinox »

"You can" and "you should" are very much not the same thing on this; of course there'll be exceptions but in the general case I'd say there will be an existing tag you should use.

Re: You can make up HTML tags

#125

Post by senfiaj »

Yes, I know about them. But I don't think they are very useful outside custom HTML components (JS required). I'd rather use the standard semantic elements as much as possible since they provide good SEO / accessibility out of the box.

Re: You can make up HTML tags

#126

Post by DemocracyFTW2 »

prox wrote: post #82
tombert wrote: post #30

Many years ago, I decided to reinvent the `blink` tag, because the monsters who make browsers removed support for it. I didn't know you could just make up tags, but I figured I'd give it a shot, and with a bit of jquery glue and playing with visibility settings, I was able to fix browsers and bring back the glorious blinking. I was surprised you could just do that; I would have assumed that the types of tags are fina…

Talking about this, I am still sad Flash got removed from the web. Nothing to replace it with to afaik.

Good riddance. I once had the honor of being featured together with many other artist on an HP website. It was implemented in Flash though, meaning it existed as a smallish rectangle in the middle of a website; within that rectangle you could click through to browse the exhibition one artwork at a time. This entailed that your path through the Flash app was not connected to the browser's address bar and exhibits did not get a URL of their own. When you wanted to direct others to your piece the only way was by giving them a "Japanese visitor's address", as in "go to this well-known named point (the domain name), from there walk west and when you see a tall black building, turn right and take the third alley to your left, I'm living in the fifth house down that alley".

Plenty to replace it with to afaik.

Re: You can make up HTML tags

#127

Post by troupo »

WickyNilliams wrote: post #123
troupo wrote: post #120

Earlier quoted context omitted.

> At least if you are in a position where your component might be used in many places. I think someone once called them leaf components, and on this I agree.

They don't need to be leaf components to still have this strength. I've worked with design systems which have a component near the root which defines sidebar, header etc slots. This still works nicely with react, Vue etc But I agree they tend to be better suited as "leafier" components

> I've worked with design systems which have a component near the root which defines sidebar, header etc slots.

Funnily enough this is exactly what original proposal of web components was against :)

Re: You can make up HTML tags

#128

Post by icedrift »

jdthedisciple wrote: post #116
dannye wrote: post #91

are NOT unrecognized tags! I blogged about this: https://dashed-html.github.io ◄ = always an HTMLUnknownElement until the WHATWG adds it as new Element. ◄ = (No JS!) UNDEFINED Custom Element , valid HTMLElement, great for layout and styling ◄ Upgraded with the JavaScript Custom Elements API it becomes a DEFINED Custom Element --- ► This is standard behaviour in all browsers. Chrome (2016) Safari (2017) FireFox (2018)…

Why is this not default practice?

Mainly because it isn't semantic and breaks accessibility features. If you find yourself writing layouts like this you're probably ignoring a bunch of useful stuff like etc. Unless you manually configure it yourself, screen readers won't know what's important to read, tabindex won't know where to jump around, and form fields won't know what values to offer.

Re: You can make up HTML tags

#130

Post by delaminator »

vbezhenar wrote: post #110
chrismorgan wrote: post #51

Earlier quoted context omitted.

> because the monsters who make browsers removed support for it Most browsers never implemented it in the first place. Safari, Chrome, IE and Edge never had it. In terms of current browser names, it was only Firefox and Opera that ever had it, until 2013.

IE was holding back the progress even before Chrome and Safari were a thing.

> IE was holding back the progress

Oh those times. IE accepted whereas Nestscape demanded and would just not render anything else - just blank grey

Humans loved it, when they had to type all this by hand, because missing /td would not kill your page.

Permissiveness won out.

I also remember the day JavaScript hit the net.

and all those "chat rooms" that did to look live suddenly had no defence against this

document.write('http://twistys.com/folder/porn.jpg')

or alert bombs

Post reply on HN