javascript - Bruke egendefinerte HTML-elementer vs HTML-elementer med ID-er eller klasser

Av nysgjerrighet, hvilken effekt, om noen, vil det ha på et nettsted eller en side hvis man i stedet for å bruke ID-er eller klasser for elementer bare oppretter tilpassede elementer med JS og stiliserer dem med CSS?

For eksempel, hvis jeg lager et element "container" og bruker det som <container> i stedet for <div class="container">, er det noen forskjell i ytelse eller noe?

Jeg ser ikke dette bli brukt ofte og lurer på hvorfor?

Svar #1

Det er som å si «Hva om jeg respekterer syntaksen og grammatikken i engelsk, men finner på alle ordene?» Selv om denne tankegangen gir god poesi, egner den seg ikke godt for tekniske fag ;)

HTML har et definert sett med tagger som er gyldige. Hvis du bruker noen tagger som er oppdiktede, vil det være ugyldig.

Nå betyr ikke det at du ikke kan slippe unna med det; på World Wide Web er tilgivelse standard, så hvis du brukte tagger du fant på selv, ville det ikke være verdens undergang... men det ville fortsatt være en dårlig idé fordi du ikke har noen garanti for hvordan nettlesere håndterer disse taggene.

Så det eneste reelle svaret på «hvilken effekt vil det ha på en side hvis man i stedet for å bruke IDer eller klasser for elementer, bare oppretter egendefinerte elementer med JS og styler dem med CSS?» er alt kan skje. Siden du ville bruke ikke-standard HTML-elementer, ville du ende opp med ikke-standard resultater, noe ingen av oss bør forsøke å forutsi.

Hvis du virkelig vil (og/eller trenger å) bruke tilpassede elementer, se nærmere på XML. I XML kan du "finne på" taggene dine, men du kan fortsatt bruke CSS og åpne dokumentene i en nettleser.

For eksempel, lagre de følgende to filene, og åpne deretter XML-filen i en nettleser:

index.xml

<?xml-stylesheet href="style.xml.css"?>
<example>
 <summary>
     This is an example of making up tags in XML, and applying a stylesheet so you can open the file in a browser.
 </summary>
 <main>
     <container>This is the stuff in the container</container>
 </main>
</example>

stil.xml.css

summary {
    display:none;
}
main container {
    border:2px solid blue;
    background:yellow;
    color:blue;
}

Svar #2

HTML er standardisert, du kan ikke bare finne på nye elementer. Noen nettlesere vil vise tekstinnholdet til et element de ikke kjenner igjen, men ikke alle vil gjøre det, og HTML-en din vil ikke være gyldig HTML i et slikt tilfelle.