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

31–40 of 202 posts

Re: You can make up HTML tags

#31

Post by shevy-java »

Hmmmm.

On the one hand I kind of want to use any random tag and have it work.

On the other hand ...

     # or 

    versus
I am not 100% sure, but I think I kind of prefer the div tag.

I understand that it is not the same semantically, but I am using div tags and p tags a LOT. I avoid the new HTML tags for more semantic meaning as this adds cognitive load to my brain. I'd rather confine myself to div and p tags though - it is just easier. And I use proper ids to infer additional information; it is not the same, but I kind of want to keep my HTML simple too. So I don't want to add 500 new custom HTML tags really. Even though I think having this as a FEATURE, can be useful.

Re: You can make up HTML tags

#32

Post by teaearlgraycold »

lofties wrote: post #29
ok123456 wrote: post #4

By default, they will behave like spans. You can customize it using the Custom Element API: https://developer.mozilla.org/en-US/docs/Web/API/Web_compone...

I used custom elements extensively in 2014 when support was not as widespread. I think it's a beautiful, elegant solution and I'm still a little bit bitter that React became as big as it was. Now everything "has" to be a SPA because developers want to use React, whereas most users would actually be better served with good 'ol HTML with some custom elements where needed.

I’ve been getting into SSR with JSX as a template engine using kita. You still get full typescript analysis and composability. It beats any other SSR web templating system I’ve used.

I agree the need for everything to be a react app by default has gotten out of control. But I think if you’re a startup with unknown future needs it’s hard to ignore the flexibility and power of something like react. If you know you’re just making a CRUD app and good old fashioned form POSTs will do then it’s beautiful to have that speed and the lightweight pages.

Re: You can make up HTML tags

#33

Post by ianbutler »

sleazebreeze wrote: post #10
ianbutler wrote: post #7

https://lit.dev/ That's the premise behind Lit (using the custom elements api)! I've been using it to build out a project recently and it's quite good, simpler to reason about than the current state of React imo. It started at google and now is part of OpenJS.

I just evaluated Lit for work and while we didn't go with it, it was very nice. I love the base custom elements API regardless of using Lit or not, turns out that's all you really need to make intricate UIs that feel seamless.

Interesting, I'd be curious to know why you all decided not to go with it if you're open to sharing! Minimally to know if I should look at any other promising frameworks.

Re: You can make up HTML tags

#34

Post by dleeftink »

fpoling wrote: post #24
chrismorgan wrote: post #12

... a bunch more HTML ... Just one quibble over this specific example (not the broader concept, which is sound): it probably didn’t have to be div soup to begin with. Something like this may have been more reasonable: ... a bunch more HTML ...

This example also shows a weakness of custom tags compared with using the class attribute. An element can have only single name but may have several classes. And as classes are unordered set, one cannot in general emulate that with several elements as the nesting introduces an order absent in the class list.

Good use case for @container, @scope and :has(), where you forgo class definitions and use --custom-properties on the parent scope/container which are inherited downwards based on the existence of a scoped DOM pattern/container query, or 'upwards' by using a :has(child-selector) on the parent.

Although be sure to avoid too many :has(:nth-child(n of complex selector)) in case of frequent DOM updates.

Re: You can make up HTML tags

#35

Post by yawaramin »

crazygringo wrote: post #27

But there's no real reason to, and it just adds confusion around which elements are semantic -- bringing formatting, functionality, meaning to screen readers and search engines, etc. -- vs which are custom and therefore carry no semantic meaning. If there's no native semantic tag that fits my purposes, I'd much rather stick to a div or span as appropriate, and identify it with one (or more) classes. That's what class…

So, the article doesn't discuss this, but there's actually a really good reason to make up and use custom elements: the browser can hydrate their dynamic behaviour automatically. For example, suppose you have:

    
      Expand
And you have some JS that handles the expander's behaviour:

    for (const expander of document.querySelectorAll('.expander')) {
      const btn = expander.querySelector('button');

      btn.addEventListener('click', () => {
        btn.ariaExpanded = 'true';
      });
    }
This will work fine for `.expander` divs that are already in the page when the event handler is set up. But suppose you dynamically load new expander divs, what then? Your event handler is not going to retroactively set up their click listeners too.

Custom elements solve exactly this problem. You can now do:

    
      Expand
And then set up the listener:

    customElements.define('expander-elem', class extends HTMLElement {
      connectedCallback() {
        const btn = this.querySelector('button');

        btn.addEventListener('click', () => {
          btn.ariaExpanded = 'true';
        });
      }
    });
And the browser will ensure that it always sets up the listeners for all of the expanders, no matter whether they are loaded on the page initially or dynamically injected later. Without this you would have had to jump through a bunch of hoops to ensure it. This solves the problem elegantly.

Re: You can make up HTML tags

#38

Post by JediBurrell »

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…

I for one am glad that blink is no longer a thing, it's certainly behavior that should require more thought than a simple html element can provide.

Re: You can make up HTML tags

#39

Post by 01HNNWZ0MV43FF »

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…

I think you can do it fully in CSS these days! https://www.w3docs.com/tools/code-editor/13719

I modified `.blink` to `blink` so it will target the tag instead of the class and it seemed to work

Post reply on HN