5 ms·

> 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 cu

> 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_components/Using_custom_elements 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?

efilife 3y ago
You can use custom tags just like any other native tags without any js, they just work
d_k_f 3y ago
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; }.
- troupo 3y ago
  You... Can't. You literally cannot define a custom element without Javascript.
  - globular-toast 3y ago
    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.
    - mapreduce 3y ago
      Is this behavior specified by the standard? Any links to the relevant section?
      - d_k_f 3y ago
        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#extensibility-2 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."
        troupo 3y ago
        Yes. It means they are not "custom elements". They are basically divs.
        xigoi 3y ago
        Yes, they are basically divs, but with a semantic name. Which is exactly what we wanted to achieve.
        troupo 3y ago
        It's quite literally not what we were trying to achieve.
        xigoi 3y ago
        How else would you want custom elements to work?
        troupo 3y ago
  - d_k_f 3y ago
    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 https://codepen.io/dkoch-org/pen/yLwPVYG for a quick example.
    - troupo 3y ago
      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.
      - globular-toast 3y ago
        How is `def reduce(numerator, denominator)` different from `def f(a, b)`?

efilife 3y ago

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

d_k_f 3y ago

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; }.

troupo 3y ago
You... Can't. You literally cannot define a custom element without Javascript.
- globular-toast 3y ago
  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.
  - mapreduce 3y ago
    Is this behavior specified by the standard? Any links to the relevant section?
    - d_k_f 3y ago
      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#extensibility-2 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."
      - troupo 3y ago
        Yes. It means they are not "custom elements". They are basically divs.
        xigoi 3y ago
        Yes, they are basically divs, but with a semantic name. Which is exactly what we wanted to achieve.
        troupo 3y ago
        It's quite literally not what we were trying to achieve.
        xigoi 3y ago
        How else would you want custom elements to work?
        troupo 3y ago
- d_k_f 3y ago
  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 https://codepen.io/dkoch-org/pen/yLwPVYG for a quick example.
  - troupo 3y ago
    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.
    - globular-toast 3y ago
      How is `def reduce(numerator, denominator)` different from `def f(a, b)`?