[policy, no patch] Choose a markup strategy for HTMX POC

Created on 20 June 2024, 5 months ago
Updated 10 July 2024, 4 months ago

Problem/Motivation

The normative examples shown on htmx.org use a consistent markup pattern for the attributes that express HTMX functionality: hx-trigger="click". The html standard would describe this use as "non-normative."

Nevertheless, since such attributes do not trigger a parsing error, they pass through to the DOM.

Additional references

It’s worth mentioning that, if you prefer, you can use the data- prefix when using htmx

https://htmx.org/docs/

Authors must not use elements, attributes, or attribute values that are not permitted by this specification or other applicable specifications, as doing so makes it significantly harder for the language to be extended in the future.

In the next example, there is a non-conforming attribute value ("carpet") and a non-conforming
attribute ("texture"), which is not permitted by this specification:

<label>Carpet: <input type="carpet" name="c" texture="deep pile"></label>

https://html.spec.whatwg.org/#semantics-2

Proposed resolution

Remaining tasks

Decide on the markup we will use for HTMX Attributes

User interface changes

-

API changes

-

Data model changes

-

🌱 Plan
Status

Fixed

Version

11.0 πŸ”₯

Component
AjaxΒ  β†’

Last updated 1 day ago

Created by

πŸ‡©πŸ‡ͺGermany c-logemann Frankfurt/M, Germany

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @c-logemann
  • πŸ‡ΊπŸ‡ΈUnited States fathershawn New York

    Here's the original post from @C-Logemann

    The library works pretty good but just follow the examples of the original code makes HTML invalid.

    Try https://validator.w3.org/ with:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>test</title>
    </head>
    <body >
    <div hx-get="/test/info" hx-trigger="every 1s" class="test"></div>
    </body></html>

    With data prefix it also works but it's now valid:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>test</title>
    </head>
    <body >
    <div data-hx-get="/test/info" data-hx-trigger="every 1s" class="test"></div>
    </body></html>
    
  • πŸ‡ΊπŸ‡ΈUnited States fathershawn New York
  • πŸ‡ΊπŸ‡ΈUnited States fathershawn New York
  • Status changed to Fixed 5 months ago
  • πŸ‡«πŸ‡·France nod_ Lille

    It's great that it natively supports data-hx- attributes. The great thing is that it doesn't prevent people from using hx- at the same time. It's not everyday there is no downsides :)

    We should use the data-hx- form in Drupal since we're following the standards.

  • πŸ‡«πŸ‡·France fgm Paris, France

    There is a tiny downside in that it makes the markup just a tiny bit heavier. It would be worth checking whether it is parsed at exactly the same speed, or if there is a measurable difference, although even if it is measurable it might not be very relevant.

  • πŸ‡«πŸ‡·France nod_ Lille

    I checked the htmx code and they're querying the DOM for both hx-* and data-hx-* attributes at the same time : https://github.com/bigskysoftware/htmx/blob/master/src/htmx.js#L337 so there is no performance impact here, it's the DOM doing the work in either case

  • πŸ‡«πŸ‡·France fgm Paris, France

    OK, so it's just the tiny extra markup weight. Probably worth it ?

  • πŸ‡«πŸ‡·France nod_ Lille

    It compress very well, better focus on something else if page weight is an issue

  • πŸ‡«πŸ‡·France fgm Paris, France

    Makes sense, since it's just a few common values, so we validate standard markup, then ?

  • πŸ‡«πŸ‡·France nod_ Lille

    we fixed a few issues that made HTML invalid over the years (duplicate ids, closing tags, that kind of things). At least we don't add known invalid html on purpose.

  • πŸ‡©πŸ‡ͺGermany c-logemann Frankfurt/M, Germany

    Yes, it's true. With the "data-" prefix we get a little bit of more functional data to manage and serve. But it's so minimal that if you want to safe some data there are so many possibilities without getting invalid: Maybe w shorter IDs and classes. e.g. "m-item" instead of "menu-item" etc. Or we could move default public files folder from "/sites/default/files" to "/files" so all links to css etc. would be shorter. And as far as I understand it's not needed to add <meta name="Generator" content="Drupal 10 (https://www.drupal.org)"> to any page.

  • Automatically closed - issue fixed for 2 weeks with no activity.

Production build 0.71.5 2024