Discuss - valid HTML #433

ianhobbs · 2020-04-28T23:45:30Z

Hi This is more of a discussion of good form.
Html validation throws errors on a lot of the Alpine markup. [ x-data , @click, :class etc ] . I'm using the following Doctype declarations.

<!DOCTYPE html> <html lang="en"> <meta charset="UTF-8">

Is there an advisory on a better doctype declaration to allow these attributes?

There is no fuctional error just a validation error.

The text was updated successfully, but these errors were encountered:

SimoTod · 2020-04-29T07:22:06Z

I don't think there are any doctypes supporting x-* attributes but browser will still render the page even with "invalid" attributes.
Does it cause a particular issue?

MuzafferDede · 2020-04-29T07:33:24Z

I used to challenge this a lot back in time. I was building front end of airline company's website which they need to be valid by W3C and WCAG guidelines and validators. So i couldn't use custom attributes or anything that cause red flag on the validation.

This wonders me if that is the case, could we go with data-x-[directive]. Also I was thinking x- attribute should be configurable so devs can define their own selectors. Maybe something like data-alpine-config="{prefix: 'data-x'}" so with this, alpine directives will regionesed by data-x-[directive] prefix.

SimoTod · 2020-04-29T09:04:34Z

I think we can easily support an extended syntax data-x-* along the canonical one for those who need to stick with valid html5 syntax if Caleb is cool with that.
It will be just about adding an optional data- prefix to the regexps.

HugoDF · 2020-04-29T09:16:32Z

I agree with adding support for "data-x-" on top of "x-" (rather than config).

In a way I'm sure it could just be a "alpine-w3c-compliant" fork since the changes are likely to be very localised

calebporzio · 2020-04-29T12:59:26Z

I think we should hold off on this until it's a legitimate problem for people.

Not worth the work of no one actually needs it

ntkoopman · 2021-03-25T04:16:50Z

I think it would be good to have an alternative. I was thinking of using alpine together with server rendered react, but jsx doesn't support non-valid attributes like @click, so it's impossible.

ntkoopman · 2021-03-25T08:27:09Z

Oh, seems it's already there using x-on: and x-bind: instead which work correctly in react as well (might have to use object spread when using jsx, like <div x-on:click="open=false" {...{'x-show.transition.out':'open'}}>)

vrabota · 2021-09-24T14:44:05Z

Any news on this item? I can't upload my premium theme on Envato platform because of this issue :(

SimoTod · 2021-09-24T14:50:38Z

@vrabote V3 supports custom prefixes: #2042 (comment)

vrabota · 2021-09-24T15:18:57Z

@SimoTod Thank you!!! It's will be nice to have that in docs 👍

calebporzio · 2021-09-24T15:29:44Z

@vrabota - good call. Can you PR documentation for it? Thanks!

driss-chelouati · 2021-09-26T18:04:28Z

@calebporzio I implemented a solution proposed by @SimoTod , but it does only partially work and doesn't pass validation. This is my entire alpine setup:

//Alpine JS and plugins import
import Alpine from 'alpinejs'
import intersect from '@alpinejs/intersect'
import Fern from '@ryangjchandler/fern'
//Prefix alpine special attributes to pass W3C validation
document.addEventListener('alpine:init', () => Alpine.prefix('data-x-'))
window.Alpine = Alpine
//Init intersect plugin
Alpine.plugin(intersect)
//Init Fern plugin
Alpine.plugin(Fern)
//Init Fern persisted store
Alpine.persistedStore('app', {
    isLoggedIn: false,
})
//Start Alpine JS
Alpine.start()

Unfortunately, this also prevents me from releasing this product on ThemeForest.

Using data-x-* attributes, I don't have the invalid attributes errors of before. But now I have XML errors. So Iam affraid this isn't solved yet or Iam missing something. See attached screen.

vrabota · 2021-09-28T08:07:31Z

@driss-chelouati you can't use custom data-* attributes with data-x-on:click (it's not allowed), should be something like data-x-on-click.
: is not allowed in data-* attributes, can we have this stuff configurable as well?

vrabota · 2021-09-28T08:25:55Z

@driss-chelouati you can fix your issues by using this approach https://alpinejs.dev/globals/alpine-data#encapsulating-directives-with-x-bind

Instead of defining your custom directives like x-bind:class you can use in HTML just x-bind="trigger" that encapsulate all not allowed tags

driss-chelouati · 2021-09-28T09:59:23Z

@vrabota That would only result in unecessary convolutions in my code as it does not fit my use case. I simply need to use existing directives or otherwise why are they still there if they do not validate? In the end, I'll just end up converting my stuff to Vue and dropping alpine for good as I don't see a fix coming for this in a reasonable delay.

PubliAlex · 2024-06-11T08:59:42Z

@driss-chelouati you can fix your issues by using this approach https://alpinejs.dev/globals/alpine-data#encapsulating-directives-with-x-bind

Instead of defining your custom directives like x-bind:class you can use in HTML just x-bind="trigger" that encapsulate all not allowed tags

That's not a viable solution, it completely change most developper workflow whereas we just need a syntax that would be w3c valid.

SimoTod · 2024-06-11T09:20:04Z

@PubliAlex This is probably your best shot: #3397

calebporzio closed this as completed Apr 29, 2020

michalczaplinski mentioned this issue Mar 10, 2023

Should we follow the HTML specification to the letter? WordPress/block-interactivity-experiments#132

Closed

ausi mentioned this issue Oct 21, 2023

Special characters with HTML attributes in Twig templates contao/contao#6445

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Discuss - valid HTML #433

Discuss - valid HTML #433

ianhobbs commented Apr 28, 2020 •

edited

Loading

SimoTod commented Apr 29, 2020

MuzafferDede commented Apr 29, 2020 •

edited

Loading

SimoTod commented Apr 29, 2020

HugoDF commented Apr 29, 2020 •

edited

Loading

calebporzio commented Apr 29, 2020

ntkoopman commented Mar 25, 2021

ntkoopman commented Mar 25, 2021

vrabota commented Sep 24, 2021

SimoTod commented Sep 24, 2021 •

edited

Loading

vrabota commented Sep 24, 2021

calebporzio commented Sep 24, 2021

driss-chelouati commented Sep 26, 2021 •

edited

Loading

vrabota commented Sep 28, 2021 •

edited

Loading

vrabota commented Sep 28, 2021

driss-chelouati commented Sep 28, 2021

PubliAlex commented Jun 11, 2024

SimoTod commented Jun 11, 2024

Discuss - valid HTML #433

Discuss - valid HTML #433

Comments

ianhobbs commented Apr 28, 2020 • edited Loading

SimoTod commented Apr 29, 2020

MuzafferDede commented Apr 29, 2020 • edited Loading

SimoTod commented Apr 29, 2020

HugoDF commented Apr 29, 2020 • edited Loading

calebporzio commented Apr 29, 2020

ntkoopman commented Mar 25, 2021

ntkoopman commented Mar 25, 2021

vrabota commented Sep 24, 2021

SimoTod commented Sep 24, 2021 • edited Loading

vrabota commented Sep 24, 2021

calebporzio commented Sep 24, 2021

driss-chelouati commented Sep 26, 2021 • edited Loading

vrabota commented Sep 28, 2021 • edited Loading

vrabota commented Sep 28, 2021

driss-chelouati commented Sep 28, 2021

PubliAlex commented Jun 11, 2024

SimoTod commented Jun 11, 2024

ianhobbs commented Apr 28, 2020 •

edited

Loading

MuzafferDede commented Apr 29, 2020 •

edited

Loading

HugoDF commented Apr 29, 2020 •

edited

Loading

SimoTod commented Sep 24, 2021 •

edited

Loading

driss-chelouati commented Sep 26, 2021 •

edited

Loading

vrabota commented Sep 28, 2021 •

edited

Loading