Hacker News Reader

Comment by mapreduce | Hacker News Reader

> We live in a world where custom elements (aka <whatever-you-can-dream-of>) are fully supported and enabled by modern browsers.

Don't we need to define the custom element <whatever-you-can-dream-of> using javascript first?

All my knowledge about custom elements comes from this Mozilla doc: https://developer.mozilla.org/en-US/docs/Web/API/Web_compone...

If custom elements is the way to go, it sounds like a lot of javascript and coding overhead that I have to take. Doesn't it?

View on HN

Depends on what you're going to use them for. If you need the actual JS functionality web components can offer, then yes. Though at this point you're in JS land anyways and probably using some kind of web component library (or your custom-built helpers/wrappers/etc.), which usually handles this for you.

If all you want to do is prevent the "div/span-tag soup" as he calls it, you don't have to register anything, though. You can just write <ui-card><ui-card-header>My header</ui-card-header></ui-card> and style that using regular CSS à la ui-card { background-color: red; }.

You... Can't. You literally cannot define a custom element without Javascript.

You don't have to define it, though. Browsers are supposed to just put unknown elements in the DOM and style them like any other element, using CSS.

Is this behavior specified by the standard? Any links to the relevant section?

The custom element specification (section 4.13) deals mostly with the registration and usage details, but the general extensibility section earlier on covers the basic use case: https://html.spec.whatwg.org/multipage/infrastructure.html#e...

"User agents must treat elements and attributes that they do not understand as semantically neutral; leaving them in the DOM (for DOM processors), and styling them according to CSS (for CSS processors), but not inferring any meaning from them."

Yes. It means they are not "custom elements". They are basically divs.

Yes, they are basically divs, but with a semantic name. Which is exactly what we wanted to achieve.

It's quite literally not what we were trying to achieve.

How else would you want custom elements to work?

What we're discussing are not custom elements. If you rename a div into <some-other-name>, it doesn't make that a custom element.

Very quite literally in the very literal sense of the word the only way to create actual custom elements is through javascript. There's no other way.

A sibling comment posted this link: https://codepen.io/dkoch-org/pen/yLwPVYG. And this is not custom elements. These are "elements unknown to the browser which will be treated in a neutral way making them indistinguishable from divs/spans". In the context of "preventing div/span soup" this does absolutely nothing. It's the same soup, just with longer names.

Defining them in js doesn't "do anything" either. I think the dispute here boils down to why you would prefer longer names over div/span everywhere. It doesn't make any difference to users, but can make it a lot easier for developers. That's the main reason to do it for me.

More like span, since the default is inline

Ah. For some reason I misremembered that the default is block.

You don't need a standard if it works in most browsers. And that's worked fine for me on nearly a dozen enterprise web apps since ~1995

Like I said: If you want to use the JS-based functionality, you obviously have to register it. Simply using any made-up element in your HTML and styling it via CSS just works ouf the box. See https://codepen.io/dkoch-org/pen/yLwPVYG for a quick example.

How exactly is this different from "the 'div/span-tag soup' as he calls it"? You just renamed some divs, and relied on the standardised behaviour of unknown tags. They are indistinguishable (and just as non-componentised and non-reusable) as the div/span soup.

How is `def reduce(numerator, denominator)` different from `def f(a, b)`?

You can use custom tags just like any other native tags without any js, they just work

Reply on news.ycombinator.com