In che modo AngularJS riesce a utilizzare tag e attributi di elementi HTML5 personalizzati?

La maggior parte dei browser sembra consentire di creare qualsiasi tag elemento che ti piace e aggiungere qualsiasi nome di attributo che ti piace agli elementi. Ad esempio:In che modo AngularJS riesce a utilizzare tag e attributi di elementi HTML5 personalizzati?

<!DOCTYPE html> 
<html> 
<body> 
<div my-attribute="has no data- prefix, but seems to behave like an attribute should"> 
    <br/> 
    <hello-world style="display:block;background:#eee">Hello Everybody</hello-world> 
    <goodby-world style="background:#faa">Default display is inline</goodbye-world> 
</div> 
</body> 
</html>

Quanto sopra viene visualizzato correttamente. Sembra che gli elementi non definiti si comportino in modo simile agli span. Sembra inoltre che AngularJS sfrutti i tag personalizzati con gli attributi &, in gran parte dipende da esso.

Ma, per quanto ho capito, fare quel genere di cose era un no-no, tranne nel caso degli attributi html5 personalizzati con il prefisso "data-".

Quindi, la mia domanda è: non è più un tabù creare i propri tag e/o nomi di attributi personalizzati? In altre parole, AngularJS si basa su stranezze non standard che non fanno realmente parte delle specifiche HTML5, ma funzionano comunque? Qualcuno in Google ha scoperto un capitolo segreto a lungo perduto della specifica html5? O sto totalmente fraintendendo qualcosa?

fonte

2013-09-06 DaveInMaine

I quirk SONO una parte della specifica HTML5, quindi tutti i browser dovrebbero essere espulsi allo stesso modo, il che significa che anche il crap html come utilizzato da angular è compatibile con browser diversi nei browser HTML5. se vuoi convalidare, segui le specifiche. se ti interessa più delle caratteristiche angolari rispetto alla convalida, usa l'angolare. se vuoi entrambi, usa le classi o gli attributi-dati per guidare angolare invece di tag e attributi personalizzati. – dandavis

Non verrà convalidato ma verrà visualizzato.

HTML5 è progettato per essere molto indulgente (contrariamente a XHTML). Questo è in parte il modo in cui i browser "più vecchi" HTML5 possono consentire nuovi elementi (così come HTML formattato male) che quella versione non supporta ancora senza rompere la pagina.

Questo può naturalmente essere "sfruttato" per introdurre tag personalizzati.

Detto questo, puoi farlo anche con HTML4.

Come menzionato nei commenti: è anche possibile precedere gli attributi in un tag normale con data- e verrà convalidato.

fonte

2013-09-06 19:42:15 K3N

Aggiungo che se desideri che la pagina venga convalidata puoi semplicemente aggiungere prefissi agli attributi con dati- ed evitare di utilizzare elementi personalizzati, ma invece fare affidamento sull'uso di direttive di classe o attributo e puoi avere una pagina di convalida. In ultima analisi, se restituisce/funziona è ciò che conta. Compatibilità IE piuttosto rilevante http://docs.angularjs.org/guide/ie e un altro post SO http://stackoverflow.com/questions/16949926/w3c-validation-with-directives-in-angularjs – shaunhusain

@shaunhusain buon punto. – K3N

Questo è un po 'supponente, ma lo è anche l'argomento. Il Web è ora ciò che facciamo, abbiamo la possibilità di creare/modificare/modificare elementi non specifici. E il team di Angular potrebbe non interessarsi alle specifiche, è all'avanguardia, ti permettono di fare ciò che vuoi. Detto questo, puoi fare qualsiasi cosa e tutto in Angolare con markup che si convalida e si conforma alle specifiche HTML5 (come in entrambi supportano entrambe le modalità).

fonte

2013-09-06 19:56:54 TheSharpieOne

AngularJS in realtà non interessa, dipende totalmente da te. Se si desidera che la direttiva sia compatibile con IE precedenti, è necessario utilizzare <div data-hello-world> anziché <hello-world> e inserire i dati davanti a tutti gli attributi personalizzati.

HTML5 non è ancora al 100% la norma, ma sta lentamente diventando la norma.

fonte

2013-09-06 20:03:35

Puoi anche usare il file IEShiv.js e fare document.createElement ("mio-elemento-personalizzato") per i tuoi propri elementi per impedire che IE venga bloccato (pensate che fallisca ancora la convalida ma jimmy cracking mais ...). https://github.com/angular-ui/angular-ui/tree/master/common/ieshiv – shaunhusain

Da specifica W3C:

Gli autori non devono utilizzare elementi, attributi, o valori degli attributi che non sono consentiti da questa specifica o [altre specifiche applicabili] [1], in quanto così facendo rende molto più difficile per la lingua da estendere in futuro.

Tuttavia, mentre la fonte iniziale del corpo della pagina (prima i processi angolari di un elemento ng-app), non può aderire agli standard W3C, se si utilizza replace: true nelle direttive, elementi personalizzati sono sostituiti da un modello HTML, che può essere valido. Quindi, in questo caso, puoi pensare a un elemento angolare come solo un segnaposto che viene sostituito con l'output HTML del terminale.

fonte

2013-12-08 13:35:48

Il problema è, per qualsiasi ragione, "sostituire" è diventato deprecato per qualche tempo. – kboom

In che modo AngularJS riesce a utilizzare tag e attributi di elementi HTML5 personalizzati?

risposta

Problemi correlati