Alpine based page doesn't pass W3C validator markup validation service

[driss-chelouati]

Iam building an application template with Alpine v3. Due to some project constraints, Iam forced to test out W3C validation on each application page. It fails with a lot of warning and errors because of Alpine custom attributes (x-*) and bindings like :class.
Is there something to do about this? see attached screenshot

[SimoTod]

Alpine v3 supports custom prefixes.

<script>
document.addEventListener('alpine:init', () => Alpine prefix('data-x-'))
</script>

data-* attributes are allowed and they'll pass validation

[SimoTod]

Alpine is not w3c compliant out of the box. You can use x-bind and define the attributes in the js side but it's probably not as immediate as it would be in the html

[ekwoka]

Alpine is not w3c compliant out of the box. You can use x-bind and define the attributes in the js side but it's probably not as immediate as it would be in the html

You do

x-bind="{':style': 'display: none;'}"

[JorickPepin]

Alpine is not w3c compliant out of the box. You can use x-bind and define the attributes in the js side but it's probably not as immediate as it would be in the html

You do

x-bind="{':style': 'display: none;'}"

Do you know if it's possible to do the same with x-on ? Something like

x-on="{':click': alert()}"

instead of

x-on:click="alert()"

I can't get it to work.

[ekwoka]

x-bind="{'@click'() { do stuff } }"

[Zmove]

Would be great to have an alpine 4 W3C compatible. There is probably a way to find a syntax that can fit w3c standard without losing features