क्या कस्टम तत्व HTML5 मान्य हैं?

181

मैं इस बात का पक्का जवाब नहीं दे पाया कि क्या कस्टम टैग HTML5 में मान्य हैं, जैसे:

<greeting>Hello!</greeting>

मैं एक तरह से या अन्य कल्पना में कुछ भी नहीं मिला है:

http://dev.w3.org/html5/spec/single-page.html

और कस्टम टैग W3C सत्यापनकर्ता के साथ मान्य नहीं लगते हैं।

html custom-element

— D13
स्रोत

2

हो सकता है कि आप 4.5 साल पहले लिखे गए HTML5 लेख में बहुत अधिक स्टॉक न रखना चाहें।

— 1985 में jessegavin

9

क्रॉकफोर्ड का लेख एक विचित्र है। महत्वपूर्ण वाक्य है "यह एक किन्नर, gentler HTML 5 के लिए मेरा प्रस्ताव है "। दूसरे शब्दों में, यह आज हम जानते हैं कि HTML5 नहीं है, लेकिन HTML 4 के उत्तराधिकारी के रूप में एक अलग HTML 5 के लिए एक प्रस्ताव। । यहां "अनुमति" शब्द का उनका उपयोग भ्रमित करने वाला है। कस्टम टैग कभी भी "अनुरूप" / "मान्य" नहीं होते हैं, लेकिन ब्राउज़र पार्सर उनकी उपस्थिति में काम करना जारी रखते हैं। वैसे भी, क्रॉकफोर्ड के प्रस्ताव को बिल्कुल भी कोई नुकसान नहीं हुआ। बमुश्किल इसका कोई हिस्सा HTML5 में शामिल किया गया है।

— अलोहसी

3

कस्टम तत्व अब प्रथम श्रेणी बन रहे हैं कि वेब घटकों के लिए उभरते हुए डब्ल्यू 3 मानक फ़ायरफ़ॉक्स और क्रोम में उभरने लगे हैं

— csuwldcat

3

डगलस क्रॉकफोर्ड के रूप में, मुझे उनकी हर बात पर विश्वास करने का लालच है।

— wnrph

1

कस्टम तत्वों के लिए वेब ब्राउज़र का समर्थन तालिका caniuse.com/#feat=custom-elements

— एड्रियन

169

कस्टम तत्वों विनिर्देश क्रोम और ओपेरा में उपलब्ध है, और में उपलब्ध होते जा रहा है अन्य ब्राउज़रों । यह एक औपचारिक तरीके से कस्टम तत्वों को पंजीकृत करने का साधन प्रदान करता है।

कस्टम तत्व नए प्रकार के DOM तत्व हैं जिन्हें लेखकों द्वारा परिभाषित किया जा सकता है। डेकोरेटर्स के विपरीत , जो स्टेटलेस और अल्पकालिक हैं, कस्टम तत्व राज्य को अतिक्रमण कर सकते हैं और स्क्रिप्ट इंटरफेस प्रदान कर सकते हैं।

कस्टम तत्व एक बड़े W3 विनिर्देश का एक हिस्सा है जिसे वेब अवयव कहा जाता है , साथ ही टेम्प्लेट, HTML आयात और छाया डोम।

वेब घटक वेब एप्लिकेशन लेखकों को विज़ुअल अमीरी के स्तर के साथ विजेट्स को परिभाषित करने और अकेले सीएसएस के साथ संभव नहीं है और रचना की आसानी और पुन: उपयोग करने में सक्षम करते हैं, आज स्क्रिप्ट लाइब्रेरी के साथ संभव नहीं है।

हालाँकि, कस्टम तत्वों v1 के बारे में Google डेवलपर्स पर लेख के माध्यम से इस उत्कृष्ट चलना से :

कस्टम तत्व के नाम में डैश ( -) होना चाहिए । तो <x-tags>, <my-element>और <my-awesome-app>सभी वैध नाम हैं, जबकि <tabs>और <foo_bar>नहीं हैं। यह आवश्यकता है ताकि HTML पार्सर नियमित तत्वों से कस्टम तत्वों को अलग कर सके। जब HTML में नए टैग जोड़े जाते हैं तो यह आगे की संगतता भी सुनिश्चित करता है।

कुछ संसाधन

उदाहरण वेब घटक https://WebCompords.org पर उपलब्ध हैं
WebCompords.js वेब घटकों के लिए एक पॉलीफ़िल के रूप में कार्य करता है जब तक कि वे हर जगह समर्थित न हों। WebCompords.js github पृष्ठ और वेब ब्राउज़र समर्थन तालिका भी देखें ।

— jessegavin
स्रोत

3

यह एक अच्छा उत्तर है (+1) लेकिन नियम कुछ गोलाकार है। "उपयोगकर्ताओं को उन चीजों को नहीं करना चाहिए जिनकी अनुमति नहीं है ..."

— अलोहसी

8

@ Alohci को आपको अपने उद्धरण में अगले 3 शब्द जोड़ने चाहिए: "इस विनिर्देश द्वारा"।

— जेस्सेग्विन

1

मैंने कल्पना के उस हिस्से को भी पढ़ा, और इसने मुझे वास्तव में भ्रमित किया। यहाँ क्यों: 1) HTML5 में कस्टम विशेषताओं की अनुमति है। यह अलोची के परिपत्र तर्क अवलोकन की पुष्टि करता है। 2) कहीं भी यह नहीं कहता है कि कस्टम तत्वों की अनुमति नहीं है।

— d13

यह उद्धरण सबसे अच्छा है। निश्चित रूप से W3C का एक और ठोस तरीका है या दूसरा?

— फ्लैश

2

Customelements.io का वह लिंक अब उपयोगी नहीं है। क्या आप इसे अपडेट करना / हटाना चाहेंगे?

— निस्सर्ग

22

यह संभव है और इसकी अनुमति है:

उपयोगकर्ता एजेंटों को उन तत्वों और विशेषताओं का इलाज करना चाहिए जो वे शब्दार्थ के रूप में तटस्थ नहीं समझते हैं; उन्हें DOM (DOM प्रोसेसर के लिए) में छोड़कर, और CSS (CSS प्रोसेसर के लिए) के अनुसार उन्हें स्टाइल करना, लेकिन उनसे कोई मतलब नहीं निकालना।

http://www.w3.org/TR/html5/infrastructure.html#extensibility-0

लेकिन, यदि आप अन्तरक्रियाशीलता जोड़ने का इरादा रखते हैं, तो आपको IE के 7 और 8 को समायोजित करने के लिए अपने दस्तावेज़ को अमान्य (लेकिन अभी भी पूरी तरह कार्यात्मक) बनाने की आवश्यकता होगी।

Http://blog.svidgen.com/2012/10/building-custom-xhtml5-tags.html (मेरा ब्लॉग) देखें

— svidgen
स्रोत

लगता है आपने वह पूरा खंड नहीं पढ़ा। न केवल यह ज्यादातर विशेषताओं के बारे में है , यह दृढ़ता से वहां अनुकूलन को भी हतोत्साहित करता है।

— एंड्रयू बार्बर

मेरी अन्य टिप्पणियों को दोहराते हुए, हाँ, मुझे खेद है कि मैं यह बताना नहीं जानता था कि यह मेरा ब्लॉग है। मैंने मान लिया कि बहुत स्पष्ट था। लेख हालांकि सीधे प्रासंगिक है। और मैं जोड़ूंगा, इसका मतलब यह नहीं है कि मैंने जो भी "दावा" किया है, उसे वापस करने के लिए एक संदर्भ के रूप में सेवा कर रहा हूं, लेकिन लंबे प्रारूप में यह दिखाने के लिए कि यह कैसे काम करता है।

— svidgen

1

मुद्दा बस यह है: विनिर्देश स्पष्ट रूप से इन चीजों की अनुमति देता है। और व्यवहार को हतोत्साहित करने के अधिकांश संदर्भों में , विनिर्देश उपयोगकर्ता-एजेंट विक्रेताओं से स्पष्ट रूप से बोल रहा है, HTML लेखक नहीं।

— svidgen

3

यह बयान hereabove उद्धृत का नवीनतम संस्करण में हटा दिया गया प्रतीत होता है w3.org/TR/html5/introduction.html#extensibility । अब तक, मुझे अभी भी इस बात पर कोई दस्तावेज नहीं मिल रहा है कि गैर-हाइफ़ननेटेड कस्टम HTML तत्वों का उपयोग वैध हो सकता है या नहीं या आपको हाइफ़नएटेड कस्टम HTML तत्वों ( HTML5rocks.com/en/tutorials-webcompenders/) को मान्य करने के लिए JS कथन की आवश्यकता है या नहीं हिरासत )।

— जॉन सेलर्स

@ जॉन्सेज़र्स हाँ, ऐसा लगता है कि प्रलेखन और / या एंकरिंग को थोड़ा बदल दिया गया था। मैंने लिंक अपडेट किया है। मेरे उत्तर में उद्धरण लिंक्ड-इन एक्स्टेंसिबिलिटी सेक्शन के नीचे स्थित है ।

— svidgen 18

14

एनबी नीचे का जवाब सही था जब यह 2012 में लिखा गया था। तब से, चीजें थोड़ी बढ़ गई हैं। HTML कल्पना अब दो प्रकार के कस्टम तत्वों को परिभाषित करती है - "स्वायत्त कस्टम तत्व" और "अनुकूलित अंतर्निहित तत्व"। पूर्व कहीं भी जा सकता है, जिसमें सामग्री की अपेक्षा की जाती है; जो शरीर के अंदर सबसे अधिक जगह है, लेकिन जैसे कि ul या ol तत्व के बच्चे, या td, th या caption तत्वों के अलावा अन्य टेबल तत्वों में नहीं। उत्तरार्द्ध जा सकता है जहां-कभी भी जो तत्व वे विस्तारित करते हैं वह जा सकता है।

यह वास्तव में तत्वों के सामग्री मॉडल के संचय का एक परिणाम है।

उदाहरण के लिए, मूल तत्व एक htmlतत्व होना चाहिए ।

htmlतत्व केवल हो सकती है एक सिर तत्व एक शरीर तत्व के द्वारा पीछा किया।

bodyतत्व केवल हो सकती है फ्लो सामग्री जहां प्रवाह सामग्री तत्वों के रूप में परिभाषित किया गया है: एक, सार, पता, क्षेत्र (यदि यह एक नक्शा तत्व का वंशज है), लेख, एक तरफ, ऑडियो, बी, बीडीआई, बीडीओ, ब्लॉकचोट, ब्र, बटन, कैनवस, काइट, कोड, कमांड, डिटालिस्ट, डेल, विवरण , dfn, div dl, em, एम्बेड, फील्डसेट, फिगर, फूटर, फॉर्म, h1, h2, h3, h4, h5, h6, हैडर, hgroup, hr, i, iframe, img, input, ins, kbd, keygen लेबल, मानचित्र, चिह्न, गणित, मेनू, मीटर, नौसेना, वस्तु, वस्तु, राजभाषा, आउटपुट, पी, पूर्व, प्रगति, क्ष, माणिक, s, स्क्रिप्ट, अनुभाग, चयन, छोटा, अवधि, मजबूत, शैली () अगर स्कोप्ड विशेषता मौजूद है), उप, सुप, एसवीजी, टेबल, टेक्सारिया, समय,यू, उल, var, वीडियो, wbr और पाठ

और इसी तरह।

किसी भी बिंदु पर सामग्री मॉडल का कहना है कि "आप अपनी पसंद के किसी भी तत्व को इसमें नहीं डाल सकते हैं", जो कि कस्टम तत्वों / टैग के लिए आवश्यक होगा।

— Alohci
स्रोत

ठीक है, इसलिए हम मान सकते हैं कि यदि कस्टम तत्वों का उल्लेख नहीं किया गया है, तो उन्हें भी अनुमति नहीं है। जो काफी उचित लगता है।

— d13

4

यह उत्तर अब अमान्य है, उभरते W3 वेब घटक कस्टम तत्व मानक अब ब्राउज़र में उतरने लगे हैं: DVcs.w3.org/hg/webcompenders/raw-file/tip/spec/custom/…

— csuldldcat

1

@csuwldcat - वास्तव में नहीं। एचटीएमएल 5 या बाद के मानक को अभी भी किसी तरह से अपडेट करने की आवश्यकता होगी ताकि ऐसे कस्टम तत्व अपने सामग्री मॉडल का हिस्सा बन सकें। हालांकि यह दिलचस्प खबर है। मैं किस ब्राउज़र पर उनका उपयोग कर सकता हूं?

— Alohci

3

@ अलोची - जाहिर है कि पुरानी भाषा के साथ किसी भी अन्य चश्मा को इस नई वास्तविकता को प्रतिबिंबित करने के लिए अद्यतन करने की आवश्यकता होगी, लेकिन एचटीएमएल एक जीवित मानक है, और अन्य स्पेक्स को ब्लॉक नहीं करता है - अपडेट एक बार हम मानक के अगले चरणों में चले जाएंगे। धावन पथ। आप क्रोम कैनरी में वेब घटकों के मूल कार्यान्वयन और फ़ायरफ़ॉक्स अरोरा में जल्द ही खेल सकते हैं। इसके अतिरिक्त, 4 वेब कंपोनेंट्स स्पेक्स में से 3 के लिए पॉलीफ़िल उपलब्ध हैं जो आज के सभी मध्यम ब्राउज़रों में बहुत अच्छी तरह से काम करते हैं - इसमें कस्टम एलिमेंट्स स्पेस / फीचर्स शामिल हैं।

— csuwldcat

तो कस्टम तत्वों को कुछ स्थानों पर रखा जा सकता है? या आप कह रहे हैं कि उन्हें इसकी अनुमति नहीं है?

— मेलब सिप

12

मूल कस्टम तत्व और गुण

कस्टम तत्व और विशेषताएँ HTML में मान्य हैं, बशर्ते कि:

तत्व नाम लोअरकेस और से शुरू होते हैं x-
गुण नाम लोअरकेस और से शुरू होते हैं data-

उदाहरण के लिए, <x-foo data-bar="gaz"/>या <br data-bar="gaz"/>।

तत्वों के लिए एक आम सम्मेलन है x-foo; x-vendor-featureइसकी सिफारिश की जाती है।

यह ज्यादातर मामलों को संभालता है, क्योंकि यह यकीनन दुर्लभ है कि एक डेवलपर को अपने तत्वों को पंजीकृत करने के साथ आने वाली सभी शक्ति की आवश्यकता होगी। वाक्य-विन्यास भी पर्याप्त रूप से मान्य और स्थिर है। एक अधिक विस्तृत विवरण नीचे है।

उन्नत कस्टम तत्व और विशेषताएँ

2014 तक, कस्टम तत्वों और विशेषताओं को पंजीकृत करने के लिए एक नया, बेहतर तरीका है। यह IE 9 या क्रोम / फ़ायरफ़ॉक्स 20 जैसे पुराने ब्राउज़रों में काम नहीं करेगा। लेकिन यह आपको मानक HTMLElementइंटरफ़ेस का उपयोग करने , टकरावों को रोकने, गैर- x-*और गैर- data-*नामों का उपयोग करने और ब्राउज़र का सम्मान करने के लिए कस्टम व्यवहार और सिंटैक्स को परिभाषित करने की अनुमति देता है। । यह नीचे दिए गए लिंक में विस्तृत रूप से फैंसी जावास्क्रिप्ट की आवश्यकता है।

एचटीएमएल 5 रॉक्स - एचटीएमएल
वेबकॉमर्स डॉट ओआरजी में नए तत्वों को परिभाषित करना - कस्टम तत्वों का परिचय
डब्ल्यू 3 सी - वेब घटक: कस्टम तत्व

बेसिक सिंटैक्स की वैधता के बारे में

data-*कस्टम विशेषता नामों के लिए उपयोग करना कुछ समय के लिए पूरी तरह से मान्य है, और यहां तक कि HTML के पुराने संस्करणों के साथ भी काम करता है।

W3C - HTML5: एक्स्टेंसिबिलिटी

कस्टम (अपंजीकृत) तत्व नामों के लिए, W3C दृढ़ता से उनके खिलाफ सिफारिश करता है, और उन्हें गैर-अनुरूपता मानता है। लेकिन ब्राउज़र को उनका समर्थन करना आवश्यक है, और x-*पहचानकर्ता भविष्य के HTML चश्मे के x-vendor-featureसाथ संघर्ष नहीं करेंगे और पहचानकर्ता अन्य डेवलपर्स के साथ संघर्ष नहीं करेंगे। किसी भी picky ब्राउज़रों के आसपास काम करने के लिए एक कस्टम DTD का उपयोग किया जा सकता है।

यहाँ आधिकारिक डॉक्स से कुछ प्रासंगिक अंश दिए गए हैं:

"लागू विनिर्देशन MAY नई दस्तावेज़ सामग्री (जैसे एक फ़ोबॉबर तत्व) को परिभाषित करता है [...]। यदि किसी दिए गए अनुरूपण HTML5 दस्तावेज़ के वाक्यविन्यास और शब्दार्थ लागू विनिर्देश (नों) के उपयोग से अपरिवर्तित हैं, तो वह दस्तावेज़ एक अनुरूपित HTML5 है। दस्तावेज़। "

"उपयोगकर्ता एजेंटों को उन तत्वों और विशेषताओं का इलाज करना चाहिए, जिन्हें वे शब्दार्थ के रूप में तटस्थ नहीं समझते हैं, उन्हें DOM (DOM प्रोसेसर के लिए) में छोड़ रहे हैं, और CSS (CSS प्रोसेसर के लिए) के अनुसार उन्हें स्टाइल कर रहे हैं, लेकिन उनसे कोई अर्थ नहीं निकाल रहे हैं।"

"उपयोगकर्ता एजेंट गैर-अनुरूप दस्तावेजों को संभालने के लिए स्वतंत्र नहीं हैं क्योंकि वे कृपया, इस विनिर्देश में वर्णित प्रसंस्करण मॉडल इनपुट दस्तावेजों की अनुरूपता के बिना कार्यान्वयन पर लागू होते हैं।"

"HTMLUnognElement इंटरफ़ेस का उपयोग HTML तत्वों के लिए किया जाना चाहिए जो इस विनिर्देश द्वारा परिभाषित नहीं हैं।"

डब्ल्यू 3 सी - एचटीएमएल 5: व्हाट्सएप के अनुरूप दस्तावेज

— Beejor
स्रोत

11

मैं यह बताना चाहूंगा कि "वैध" शब्द के इस संदर्भ में दो अलग-अलग अर्थ हो सकते हैं, जिनमें से कोई भी संभावित, ओम्, मान्य है।

क्या कस्टम टैग वाले HTML दस्तावेज़ को मान्य HTML5 माना जाना चाहिए? इसका उत्तर स्पष्ट रूप से "नहीं।" कल्पना वास्तव में सूचीबद्ध करती है कि कौन से टैग किन संदर्भों में मान्य हैं। यही कारण है कि एक HTML सत्यापनकर्ता कस्टम टैग के साथ या गलत स्थानों पर मानक टैग के साथ एक दस्तावेज को स्वीकार नहीं करेगा (हेडर में "img" टैग की तरह)।
क्या कस्टम टैग वाले HTML दस्तावेज़ को ब्राउज़रों में मानक, स्पष्ट-परिभाषित तरीके से पार्स और प्रस्तुत किया जाएगा? यहाँ, शायद आश्चर्यजनक रूप से, जवाब "हाँ" है। भले ही दस्तावेज़ को तकनीकी रूप से मान्य HTML5 नहीं माना जाएगा, HTML5 कल्पना यह निर्दिष्ट करती है कि कस्टम टैग देखने पर ब्राउज़र क्या करने वाला है: संक्षेप में, कस्टम टैग एक तरह का कार्य करता है <span>- इसका मतलब कुछ भी नहीं है और कुछ भी नहीं करता है डिफ़ॉल्ट, लेकिन इसे HTML द्वारा स्टाइल किया जा सकता है और जावास्क्रिप्ट द्वारा एक्सेस किया जा सकता है।

— जोश
स्रोत

5

कस्टम HTML तत्व एक उभरते हुए W3 मानक हैं जिनका मैं योगदान कर रहा हूं जो आपको पार्सर के साथ कस्टम तत्वों को घोषित करने और पंजीकृत करने में सक्षम बनाता है, आप यहां युक्ति पढ़ सकते हैं: W3 वेब घटक कस्टम तत्व कल्पना । इसके अतिरिक्त, माइक्रोसॉफ्ट एक पुस्तकालय (पूर्व मोज़िला देवों द्वारा लिखित) का समर्थन करता है, जिसे एक्स-टैग कहा जाता है - यह वेब घटकों के साथ काम करना और भी आसान बनाता है।

— csuwldcat
स्रोत

1

क्या यह मसौदा पारित किया गया है?

— स्टारक्स

भाग फ़ायरफ़ॉक्स और क्रोम में उतर रहे हैं - हम एक साथ मिलकर काम कर रहे हैं और 2013 के अंत तक पूर्ण कार्यान्वयन की उम्मीद कर रहे हैं।

— csuwldcat

1

अब २०१४, क्या पूर्ण क्रियान्वयन उतरा है?

— हसीब महमूद

1

@JamieHutber और अब से एक साल बाद अपने वेबपेजों को नवीनतम ब्राउज़रों में देखें। ब्राउज़र अंतर के लिए नियम # 1: नियमों द्वारा खेलते हैं।

— मिस्टर लिस्टर

1

@HasibMahmud के स्पेक्स को अब अंतिम रूप दे दिया गया है, और कुछ हफ़्ते में क्रोम बीटा पर, फ़ायरफ़ॉक्स अरोरा ~ 6 सप्ताह में उतर जाएगा। आप config झंडा flipping द्वारा आज फ़ायरफ़ॉक्स अरोड़ा में उन्हें इस्तेमाल कर सकते हैं dom.webcomponents.enabledकरने के लिए true।

— csuwldcat

4

आधुनिक पृष्ठों को दर्शाते हुए एक अद्यतन उत्तर देने के लिए।

कस्टम टैग मान्य हैं या तो,

1) उनमें एक डैश होता है

<my-element>

2) वे एक्सएमएल एम्बेडेड हैं

<greeting xmlns="http://example.com/customNamespace">Hello!</greeting>

यह मानता है कि आप HTML5 सिद्धांत का उपयोग कर रहे हैं <!doctype html>

इन सरल प्रतिबंधों को ध्यान में रखते हुए अब यह आपके HTML मार्कअप को वैध रखने के लिए अपना सर्वश्रेष्ठ प्रदर्शन करने के लिए समझ में आता है (कृपया बंद टैग को बंद कर दें <img>और <hr>, यह मूर्खतापूर्ण और गलत है जब तक आप एक एक्सएचटीएमएल सिद्धांत का उपयोग नहीं करते हैं, जिसकी आपको शायद कोई आवश्यकता नहीं है)।

यह देखते हुए कि एचटीएमएल 5 स्पष्ट रूप से पार्सिंग नियमों को परिभाषित करता है, एक आज्ञाकारी ब्राउज़र किसी भी टैग को संभालने में सक्षम होगा जो आप इसे फेंक देते हैं, भले ही यह कड़ाई से वैध न हो।

— हेनरिक वेंडेलेबो
स्रोत

3

HTML5 विनिर्देशन के एक्स्टेंसिबिलिटी सेक्शन से उद्धरण :

मार्कअप स्तर की सुविधाओं के लिए जो XML क्रमांकन तक सीमित हो सकती हैं और HTML क्रमांकन में समर्थित नहीं होने की आवश्यकता होती है, विक्रेताओं को नामस्थान तंत्र का उपयोग कस्टम नामस्थान को परिभाषित करने के लिए करना चाहिए जिसमें गैर-मानक तत्व और विशेषताएँ समर्थित हैं।

यदि आप HTML5 के XML क्रमांकन का उपयोग कर रहे हैं, तो आपके लिए ऐसा कुछ करना कानूनी है:

<greeting xmlns="http://example.com/customNamespace">Hello!</greeting>

हालाँकि, यदि आप HTML सिंटैक्स का उपयोग कर रहे हैं, तो आप जो कर सकते हैं उसमें बहुत अधिक सीमित हैं।

HTML सिंटैक्स के साथ उपयोग के लिए इच्छित मार्कअप-स्तरीय विशेषताओं के लिए, एक्सटेंशन को "एक्स-वेंडर-फीचर" [...] के नए गुणों तक सीमित किया जाना चाहिए। नए तत्व नाम नहीं बनाए जाने चाहिए।

लेकिन उन निर्देशों को मुख्य रूप से ब्राउज़र विक्रेताओं पर निर्देशित किया जाता है, जो निश्चित रूप से जो भी कस्टम तत्व बनाने के लिए चुनते हैं, उनके लिए दृश्य स्टाइल और कार्यक्षमता प्रदान करेंगे।

एक लेखक के लिए, हालाँकि, यह पृष्ठ में एक कस्टम तत्व को एम्बेड करने के लिए कानूनी हो सकता है (कम से कम XML क्रमांकन में), आपको DOM में नोड से अधिक कुछ भी नहीं मिलने वाला है। यदि आप चाहते हैं कि आपका कस्टम तत्व वास्तव में कुछ करे, या कुछ विशेष तरीके से प्रस्तुत किया जाए, तो आपको कस्टम तत्वों के विनिर्देश को देखना चाहिए ।

इस विषय पर अधिक कोमल प्राइमर के लिए, वेब घटक परिचय पढ़ें , जिसमें शैडो डोम और अन्य संबंधित विनिर्देशों के बारे में जानकारी भी शामिल है। ये चश्मा अभी भी ड्राफ्ट काम कर रहे हैं - आप यहां वर्तमान स्थिति देख सकते हैं - लेकिन उन्हें सक्रिय रूप से विकसित किया जा रहा है।

उदाहरण के लिए, एक greetingतत्व के लिए एक सरल परिभाषा कुछ इस तरह दिख सकती है:

<element name="greeting">
  <template>
    <style scoped>
      span { color:gray; }
    </style>
    <span>Simon says:</span>
    <q><content/></q>
  </template>
</element>

यह ब्राउज़र को उद्धरण में तत्व सामग्री को प्रस्तुत करने के लिए कहता है, और "साइमन कहता है:" पाठ द्वारा उपसर्ग किया गया है, जिसे रंग ग्रे के साथ स्टाइल किया गया है। आमतौर पर इस तरह की एक कस्टम एलिमेंट परिभाषा को एक अलग HTML फ़ाइल में संग्रहीत किया जाएगा जिसे आप एक लिंक के साथ आयात करेंगे।

<link rel="import" href="greeting-definition.html" />

यद्यपि आप चाहें तो इसे इनलाइन भी शामिल कर सकते हैं।

मैंने पॉलिमर पॉलीफिल लाइब्रेरी का उपयोग करके उपरोक्त परिभाषा का एक कामकाजी प्रदर्शन बनाया है जिसे आप यहां देख सकते हैं । ध्यान दें कि यह पॉलिमर लाइब्रेरी के पुराने संस्करण का उपयोग कर रहा है - हाल के संस्करण काफी अलग तरीके से काम करते हैं। हालांकि, अभी भी विकास में कल्पना के साथ, यह कुछ ऐसा नहीं है जो मैं वैसे भी उत्पादन कोड में उपयोग करने की सलाह दूंगा।

— जेम्स होल्डरनेस
स्रोत

2

बस आप किसी भी डोम घोषणा के बिना जो चाहें उपयोग करें

<container>content here</container>

अपनी खुद की शैली जोड़ें (प्रदर्शन: ब्लॉक) और यह किसी भी आधुनिक ब्राउज़र के साथ काम करेगा

— एरिक बोइलू
स्रोत

1

data-*HTML5 में विशेषताएँ मान्य हैं और HTML4 में भी सभी वेब ब्राउज़र उनका सम्मान करते हैं। नए टैग जोड़ना तकनीकी रूप से ठीक है, लेकिन सिर्फ इसलिए अनुशंसित नहीं किया गया है:

यह भविष्य में कुछ और के साथ संघर्ष कर सकता है, और
HTML डॉक्यूमेंट को तब तक अमान्य बनाता है जब तक कि जावास्क्रिप्ट के माध्यम से गतिशील रूप से नहीं जोड़ा जाता है।

मैं केवल उन स्थानों पर कस्टम टैग का उपयोग करता हूं, जो Google को परवाह नहीं है, गेम इंजन iframe में इम्प्लांट के लिए, मैंने एक <log>टैग बनाया है जिसमें निहित है <msg>, <error>और <warning>- लेकिन केवल जावास्क्रिप्ट के माध्यम से । और यह मान्यकर्ता के अनुसार पूरी तरह से वैध था। यह अपनी स्टाइल के साथ इंटरनेट एक्सप्लोरर में भी काम करता है! ;]

— Пет Пр Петров
स्रोत

1

यह मान्यकर्ता के लिए मान्य था क्योंकि आप उन तत्वों को जावास्क्रिप्ट के साथ बना रहे थे, और सत्यापनकर्ता ने उन्हें नहीं देखा क्योंकि यह आपके जावास्क्रिप्ट को नहीं चलाता है। यह केवल पृष्ठ को देखेगा क्योंकि यह पहली बार लोड होने पर दिखाई देता है।

— animuson

बिल्कुल सही। HTML मान्य नहीं है, फिर भी कस्टम टैग SGML मान्य हैं और HTML सब के बाद SGML है। CSS का उपयोग कस्टम टैग को स्टाइल करने के लिए किया जा सकता है और यह IE में एकदम सही काम करता है। :) इसके अलावा, आप अपने DOCTYPE विनिर्देश में अपने स्वयं के कस्टम तत्वों के साथ अपने खुद के DTD निर्दिष्ट कर सकते हैं, इसलिए मेरे कस्टम टैग वास्तव में जावास्क्रिप्ट के बिना भी मान्य हो सकते हैं - लेकिन मुझे उनकी परवाह नहीं है - एक गेम इंजन GUI प्रणाली निश्चित रूप से Google नहीं है job :)

— Пет

1

खैर, एक पकड़ है। आप सिर्फ कस्टम एलिमेंट्स विली नीली में नहीं फेंक सकते। आपको "मान्य" HTML पर विचार करने के लिए डीटीडी के साथ उन्हें परिभाषित और पंजीकृत करना होगा। सिर्फ इसलिए कि कुछ कामों का मतलब यह नहीं है कि यह वैध है।

— animuson

यदि आप अपने तत्व के नाम, जैसे कि <x-msg>, <x-log>, आदि में योग्यता प्राप्त करते हैं, तो आप वेब घटक / कस्टम तत्व युक्ति का अनुपालन करेंगे।

— नील मुनरो

एक गेम इंजन में जहां वेबकिट केवल आपके गतिशील जीयूआई को प्रस्तुत करने के लिए है, कोई भी DTDs के बारे में भी परवाह नहीं करेगा। HTML के लिए किसी भी अज्ञात टैग है HTMLUnknownElement जे एस के लिए, अभी भी, JQuery और सीएसएस के साथ पूरी तरह से काम कर रहा है ताकि आपके जीयूआई अंत में कुछ अर्थ विज्ञान हो जाता है: <inventory>, <item type="potion" sprite="2">- तो यह बेहतर नहीं बल्कि HTML से SGML + सीएसएस के नाम से जाना है, कि HTML तत्वों परिभाषा है के बावजूद काम के रूप में है - बटन, सूची, ...

— Петър Петров

1

HTML5 में कस्टम टैग मान्य नहीं हैं। लेकिन वर्तमान में ब्राउज़र उन्हें पार्स करने के लिए समर्थन कर रहे हैं और आप सीएसएस का उपयोग करके भी उनका उपयोग कर सकते हैं। इसलिए यदि आप वर्तमान ब्राउज़रों के लिए कस्टम टैग का उपयोग करना चाहते हैं तो कर सकते हैं। यदि ब्राउज़र HTML सामग्री को पार्स करने के लिए W3C मानकों को सख्ती से लागू करते हैं, तो समर्थन को दूर किया जा सकता है।

— निसारग शाह
स्रोत

1

शायद ऐसा तब होगा जब वे समर्थन करना बंद कर देंगे <center>और <marquee>?

— रेवेनस्टाइन

1

मुझे पता है कि यह सवाल पुराना है, लेकिन मैं इस विषय का अध्ययन कर रहा हूं और हालांकि उपरोक्त कुछ कथन सही हैं, वे कस्टम तत्व बनाने का एकमात्र तरीका नहीं हैं। उदाहरण के लिए:

<button id="find">click me</button>
<Query? ?attach="find" ?content="alert( find() );" ?prov="Hello there :D" >
I won't be displayed :D
</Query?>

<style type="text/css">

[\?content] {

display: none;

}

</style>

<script type="text/javascript">

S = document.getElementsByTagName("Query?")[0];

Q = S.getAttribute("?content");

A = document.getElementById( S.getAttribute("?attach") );

function find() {

  return S.getAttribute("?prov");

}

(function() {

A.setAttribute("onclick", Q);

})();

</script>

पूरी तरह से ठीक काम करेगा (अब तक Google Chrome, IE, FireFox और मोबाइल सफारी के नए संस्करणों में)। टैग शुरू करने के लिए आपको बस एक अल्फा कैरेक्टर (az, AZ) की जरूरत होती है, और उसके बाद आप किसी भी नॉन अल्फा कैरेक्टर का इस्तेमाल कर सकते हैं। यदि सीएसएस में, आपको तत्व खोजने के लिए "\" (बैकस्लैश) का उपयोग करना होगा, जैसे कि क्वेरी \ ^ {...} की आवश्यकता होगी। लेकिन जेएस में, आप इसे केवल यह देखते हैं कि आप इसे कैसे देखते हैं। मुझे उम्मीद है कि इससे मदद मिलेगी। उदाहरण यहाँ देखें

-Mink CBOS

— एपेलोन डेंट्ज़लर
स्रोत

3

यह सबसे अजीब HTML है जो मैंने हाल ही में देखी है :)

— Dan Dascalescu