hx attributes without data prefix is invalid HTML

Created on 20 June 2024, about 1 year ago

Problem/Motivation

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

Steps to reproduce

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>

Proposed resolution

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>

Remaining tasks

Change every used code and examples on project page and any other documentation. And add warning to use without data prefix.
Maybe we should also suggest to add as coding standard.

User interface changes

-

API changes

-

Data model changes

-

πŸ› Bug report
Status

Active

Version

1.1

Component
AjaxΒ  β†’

Last updated 2 days 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 about 1 year 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.

  • πŸ‡³πŸ‡ΏNew Zealand quietone

    Changing to latest version when this was closed.

Production build 0.71.5 2024