องค์ประกอบที่กำหนดเองถูกต้อง HTML5 หรือไม่

ฉันไม่พบคำตอบที่ชัดเจนว่าแท็กที่กำหนดเองนั้นถูกต้องใน HTML5 หรือไม่เช่นนี้

<greeting>Hello!</greeting>

ฉันไม่พบอะไรเลยในสเปคเดียวหรืออย่างอื่น:

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

ดูเหมือนว่าแท็กที่กำหนดเองจะไม่ตรวจสอบความถูกต้องกับเครื่องมือตรวจสอบ W3C

ข้อกำหนดองค์ประกอบที่กำหนดเองสามารถใช้ได้ใน Chrome และ Opera และกลายเป็นที่มีอยู่ในเบราว์เซอร์อื่น ๆ มันมีวิธีในการลงทะเบียนองค์ประกอบที่กำหนดเองในลักษณะที่เป็นทางการ

องค์ประกอบที่กำหนดเองคือองค์ประกอบ DOM ประเภทใหม่ที่ผู้เขียนสามารถกำหนดได้ ซึ่งแตกต่างจากนักตกแต่งซึ่งเป็นแบบไร้รัฐและไม่ถาวรองค์ประกอบที่กำหนดเองสามารถสรุปสถานะและจัดเตรียมสคริปต์ส่วนต่อประสาน

องค์ประกอบที่กำหนดเองเป็นส่วนหนึ่งของข้อกำหนด W3 ขนาดใหญ่ที่เรียกว่าWeb Componentsพร้อมด้วยเทมเพลต, HTML Imports และ Shadow DOM

Web Components เปิดใช้งานผู้สร้างแอปพลิเคชันเว็บเพื่อกำหนดวิดเจ็ตที่มีระดับความสมบูรณ์ของภาพและการโต้ตอบที่ไม่สามารถทำได้ด้วย CSS เพียงอย่างเดียวและความง่ายในการจัดองค์ประกอบและการนำไปใช้ซ้ำ

อย่างไรก็ตามจากบทความที่น่าสนใจเกี่ยวกับ Custom Developers v1:

ชื่อขององค์ประกอบที่กำหนดเองจะต้องมีเส้นประ ( -) ดังนั้น<x-tags>, <my-element>และ<my-awesome-app>เป็นชื่อที่ถูกต้องทั้งหมดในขณะที่<tabs>และ<foo_bar>ไม่ได้ ข้อกำหนดนี้เป็นตัวแยกวิเคราะห์ HTML สามารถแยกองค์ประกอบที่กำหนดเองจากองค์ประกอบปกติ นอกจากนี้ยังรับประกันความเข้ากันได้ไปข้างหน้าเมื่อเพิ่มแท็กใหม่ลงใน HTML

ทรัพยากรบางอย่าง

• ตัวอย่างเว็บคอมโพเนนต์มีอยู่ที่https://WebComponents.org
• WebComponents.jsทำหน้าที่เป็น polyfill สำหรับ Web Components จนกว่าจะรองรับได้ทุกที่ ดูเพิ่มเติมตารางเพจและเว็บเบราว์เซอร์สนับสนุน WebComponents.js GitHub

เป็นไปได้และได้รับอนุญาต:

ตัวแทนผู้ใช้จะต้องปฏิบัติต่อองค์ประกอบและคุณสมบัติที่พวกเขาไม่เข้าใจว่าเป็นกลาง; ปล่อยให้อยู่ใน 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 (บล็อกของฉัน)

NB คำตอบด้านล่างนั้นถูกต้องเมื่อมันถูกเขียนขึ้นในปี 2012 ตั้งแต่นั้นมาสิ่งต่าง ๆ ก็ขยับไปเล็กน้อย ข้อมูลจำเพาะ HTML ตอนนี้กำหนดองค์ประกอบที่กำหนดเองสองประเภท - "องค์ประกอบที่กำหนดเองแบบอิสระ" และ "องค์ประกอบในตัวที่กำหนดเอง" อดีตสามารถไปได้ทุกที่ที่คาดเนื้อหาเนื้อหา; ซึ่งเป็นสถานที่ส่วนใหญ่ภายในร่างกาย แต่ไม่ใช่เช่นเด็กขององค์ประกอบ ul หรือ ol หรือในองค์ประกอบตารางนอกเหนือจากองค์ประกอบ td, th หรือคำอธิบายภาพ ส่วนหลังสามารถไปได้ทุกที่ที่องค์ประกอบที่ขยายสามารถไปได้

นี่เป็นผลสืบเนื่องมาจากการสะสมของโมเดลเนื้อหาขององค์ประกอบ

ตัวอย่างเช่นองค์ประกอบหลักจะต้องเป็นhtmlองค์ประกอบ

htmlองค์ประกอบเท่านั้นอาจมีองค์ประกอบที่หัวตามด้วยองค์ประกอบของร่างกาย

bodyองค์ประกอบเท่านั้นอาจมีเนื้อหาการไหลที่ไหลเนื้อหาถูกกำหนดให้เป็นองค์ประกอบ: a, abbr, ที่อยู่, พื้นที่ (ถ้ามันเป็นลูกหลานขององค์ประกอบแผนที่), บทความ, กัน, เสียง, b, bdi, bdo, blockquote, br, ปุ่ม, ผ้าใบ, อ้างอิง, รหัส, คำสั่ง, datalist, del, รายละเอียด , dfn, div dl, em, ฝัง, fieldset, รูป, ส่วนท้าย, แบบฟอร์ม, h1, h2, h3, h4, h5, h6, ส่วนหัว, hgroup, ชั่วโมง, i, iframe, img, อินพุต, ins, kbd, keygen, ฉลาก, แผนที่, เครื่องหมาย, คณิตศาสตร์, เมนู, เครื่องวัด, nav, noscript, วัตถุ, ol, เอาท์พุท, p, ก่อนหน้า, ความคืบหน้า, q, ruby, s, samp, สคริปต์, ส่วน, เลือก, เล็ก, ขยาย, แข็งแรง, สไตล์ ( ถ้าแอ็ตทริบิวต์ที่กำหนดขอบเขตมีอยู่), ย่อย, sup, svg, ตาราง, textarea, เวลา,u, ul, var, วิดีโอ, wbr และ Text

และอื่น ๆ

โมเดลเนื้อหาไม่พูดว่า "คุณสามารถใส่องค์ประกอบใด ๆ ที่คุณชอบในอันนี้" ซึ่งจะจำเป็นสำหรับองค์ประกอบ / แท็กที่กำหนดเอง

องค์ประกอบที่กำหนดเองขั้นพื้นฐานและคุณสมบัติ

องค์ประกอบและแอตทริบิวต์ที่กำหนดเองนั้นถูกต้องใน HTML โดยมีเงื่อนไขดังนี้:

• ชื่อองค์ประกอบเป็นตัวพิมพ์เล็กและเริ่มต้นด้วย x-
• ชื่อแอตทริบิวต์เป็นตัวพิมพ์เล็กและเริ่มต้นด้วย data-

ยกตัวอย่างเช่นหรือ<x-foo data-bar="gaz"/><br data-bar="gaz"/>

สนธิสัญญาร่วมกันสำหรับองค์ประกอบคือx-foo; x-vendor-featureขอแนะนำ

สิ่งนี้จัดการกับกรณีส่วนใหญ่เนื่องจากเป็นของหายากที่ผู้พัฒนาต้องการพลังงานทั้งหมดที่มาพร้อมกับการลงทะเบียนองค์ประกอบของพวกเขา ไวยากรณ์ก็มีความถูกต้องและเสถียรเช่นกัน คำอธิบายโดยละเอียดเพิ่มเติมอยู่ด้านล่าง

องค์ประกอบและแอตทริบิวต์ที่กำหนดเองขั้นสูง

ในปี 2014 มีวิธีใหม่ที่ได้รับการปรับปรุงให้ดีขึ้นมากในการลงทะเบียนองค์ประกอบและคุณสมบัติที่กำหนดเอง มันจะไม่ทำงานในเบราว์เซอร์รุ่นเก่าเช่น IE 9 หรือ Chrome / Firefox 20 แต่จะช่วยให้คุณใช้HTMLElementอินเทอร์เฟซมาตรฐานป้องกันการชนใช้ชื่อที่x-*ไม่ใช่และไม่ใช่data-*ชื่อและกำหนดลักษณะการทำงานและไวยากรณ์ที่กำหนดเองสำหรับเบราว์เซอร์ . มันต้องใช้ JavaScript ที่หรูหราเหมือนดังรายละเอียดในลิงก์ด้านล่าง

HTML5 Rocks - การกำหนดองค์ประกอบใหม่ใน HTML
WebComponents.org - ความรู้เบื้องต้นเกี่ยวกับองค์ประกอบที่กำหนดเอง
W3C - ส่วนประกอบของเว็บ: องค์ประกอบที่กำหนดเอง

เกี่ยวกับความถูกต้องของไวยากรณ์พื้นฐาน

การใช้data-*ชื่อแอตทริบิวต์ที่กำหนดเองนั้นใช้ได้ในบางครั้งและสามารถใช้งานได้กับ HTML รุ่นเก่ากว่า

W3C - HTML5: ความสามารถในการขยาย

สำหรับชื่อองค์ประกอบแบบกำหนดเอง (ไม่ได้ลงทะเบียน) W3C ขอแนะนำอย่างยิ่งให้กับพวกเขาและพิจารณาว่าไม่สอดคล้องกัน แต่ต้องใช้เบราว์เซอร์เพื่อสนับสนุนพวกเขาและx-*ตัวระบุจะไม่ขัดแย้งกับข้อกำหนด HTML ในอนาคตและx-vendor-featureตัวระบุจะไม่ขัดแย้งกับนักพัฒนารายอื่น DTD แบบกำหนดเองสามารถใช้เพื่อแก้ไขเบราว์เซอร์ที่มีปัญหา

นี่คือข้อความที่ตัดตอนมาบางส่วนที่เกี่ยวข้องจากเอกสารอย่างเป็นทางการ:

"ข้อกำหนดที่บังคับใช้อาจกำหนดเนื้อหาเอกสารใหม่ (เช่นองค์ประกอบ foobar) [... ] หากไวยากรณ์และความหมายของเอกสาร HTML5 ที่กำหนดนั้นไม่เปลี่ยนแปลงโดยการใช้ข้อกำหนดที่ใช้บังคับดังนั้นเอกสารนั้นยังคงเป็น HTML5 ที่สอดคล้องกัน เอกสาร."

"ตัวแทนผู้ใช้จะต้องปฏิบัติต่อองค์ประกอบและคุณสมบัติที่พวกเขาไม่เข้าใจว่าเป็นกลาง, ให้พวกเขาอยู่ใน DOM (สำหรับตัวประมวลผล DOM) และจัดแต่งพวกเขาตาม CSS (สำหรับตัวประมวลผล CSS) แต่ไม่อนุมานความหมายใด ๆ จากพวกเขา"

"ตัวแทนผู้ใช้ไม่เสียค่าใช้จ่ายในการจัดการเอกสารที่ไม่สอดคล้องตามที่พวกเขาต้องการรูปแบบการประมวลผลที่อธิบายไว้ในข้อกำหนดนี้ใช้กับการใช้งานโดยไม่คำนึงถึงความสอดคล้องของเอกสารอินพุต"

"ต้องใช้อินเทอร์เฟซ HTMLUnknownElement สำหรับองค์ประกอบ HTML ที่ไม่ได้กำหนดโดยข้อกำหนดนี้"

W3C - HTML5: การสอดคล้องเอกสาร
WhatWG - มาตรฐาน HTML: องค์ประกอบ DOM

ฉันต้องการจะชี้ให้เห็นว่าคำว่า "ถูกต้อง" อาจมีความหมายที่แตกต่างกันสองประการในบริบทนี้

1. เอกสาร HTML ที่มีแท็กที่กำหนดเองควรเป็น HTML5 ที่ถูกต้องหรือไม่ คำตอบนี้ชัดเจนว่า "ไม่" ข้อมูลจำเพาะแสดงรายการแท็กที่ถูกต้องในบริบทใด นี่คือเหตุผลที่ผู้ตรวจสอบ HTML จะไม่ยอมรับเอกสารที่มีแท็กที่กำหนดเองหรือด้วยแท็กมาตรฐานในสถานที่ที่ไม่ถูกต้อง (เช่นแท็ก "img" ในส่วนหัว)

2. เอกสาร HTML ที่มีแท็กที่กำหนดเองจะถูกวิเคราะห์และแสดงผลในวิธีมาตรฐานที่กำหนดไว้อย่างชัดเจนในเบราว์เซอร์หรือไม่ บางทีคำตอบก็คือ "ใช่" ที่นี่ แม้ว่าเอกสารจะไม่ถือว่าเป็น HTML5 ที่ถูกต้องในทางเทคนิค แต่ข้อมูลจำเพาะ HTML5 ไม่ได้ระบุสิ่งที่เบราว์เซอร์ควรจะทำเมื่อพวกเขาเห็นแท็กที่กำหนดเอง: กล่าวโดยย่อแท็กที่กำหนดเองทำหน้าที่เหมือน<span>- มันไม่มีความหมาย ค่าเริ่มต้น แต่สามารถจัดรูปแบบด้วย HTML และเข้าถึงได้โดย javascript

องค์ประกอบ HTML ที่กำหนดเองเป็นมาตรฐาน W3 โผล่ออกมาฉันได้รับการเอื้อต่อการที่ช่วยให้คุณที่จะประกาศและลงทะเบียนองค์ประกอบที่กำหนดเองกับตัวแยกวิเคราะห์ที่คุณสามารถอ่านข้อมูลจำเพาะที่นี่: W3 Web Components องค์ประกอบที่กำหนดเองข้อมูลจำเพาะ นอกจากนี้ Microsoft ยังสนับสนุนห้องสมุด (เขียนโดย Mozilla เดิม) ที่เรียกว่าX-Tag - ทำให้การทำงานกับ Web Components ง่ายยิ่งขึ้น

เพื่อให้คำตอบที่ทันสมัยสะท้อนถึงหน้าเว็บที่ทันสมัย

แท็กที่กำหนดเองนั้นถูกต้องถ้ามี

1) มีเส้นประ

<my-element>

2) เป็น XML แบบฝัง

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

สิ่งนี้ถือว่าคุณใช้ HTML5 doctype <!doctype html>

เมื่อพิจารณาถึงข้อ จำกัด ง่าย ๆ เหล่านี้คุณควรพยายามทำให้มาร์กอัป HTML ของคุณใช้งานได้ดีที่สุด (โปรดหยุดการปิดแท็กเช่น<img>และ<hr>มันเป็นเรื่องที่โง่และไม่ถูกต้องเว้นแต่คุณจะใช้ XHTML doctype ซึ่งคุณอาจไม่ต้องการ)

เนื่องจาก HTML5 กำหนดกฎการแยกวิเคราะห์อย่างชัดเจนเบราว์เซอร์ที่เข้ากันได้จะสามารถจัดการแท็กใด ๆ ที่คุณส่งถึงแม้ว่ามันจะไม่ถูกต้องก็ตาม

การอ้างอิงจากส่วน Extensibility ของข้อกำหนด HTML5 :

สำหรับคุณลักษณะระดับมาร์กอัปที่สามารถ จำกัด เฉพาะการทำให้เป็นอันดับ XML และไม่จำเป็นต้องได้รับการสนับสนุนในการทำให้เป็นอันดับ HTML ผู้ขายควรใช้กลไกเนมสเปซเพื่อกำหนดเนมสเปซที่กำหนดเองซึ่งรองรับองค์ประกอบและแอตทริบิวต์ที่ไม่เป็นมาตรฐาน

ดังนั้นหากคุณใช้ XML5 ของ HTML5 เป็นสิ่งที่ถูกกฎหมายสำหรับคุณที่จะทำสิ่งนี้:

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

อย่างไรก็ตามหากคุณใช้ไวยากรณ์ HTML คุณจะถูก จำกัด มากขึ้นในสิ่งที่คุณสามารถทำได้

สำหรับคุณลักษณะระดับมาร์กอัปที่มีไว้สำหรับใช้กับไวยากรณ์ HTML ส่วนขยายควร จำกัด เฉพาะแอตทริบิวต์ใหม่ของฟอร์ม "x-vendor-feature" [... ] ไม่ควรสร้างชื่อองค์ประกอบใหม่

แต่คำแนะนำเหล่านั้นจะมุ่งเน้นไปที่ผู้จำหน่ายเบราว์เซอร์เป็นหลักซึ่งจะมีการจัดแต่งทรงผมและฟังก์ชั่นการมองเห็นสำหรับองค์ประกอบที่กำหนดเองที่พวกเขาเลือกที่จะสร้าง

สำหรับผู้เขียนแม้ว่ามันอาจถูกกฎหมายในการฝังองค์ประกอบที่กำหนดเองในหน้า (อย่างน้อยในการทำให้เป็นอนุกรม XML) คุณจะไม่ได้อะไรมากกว่าโหนดใน DOM หากคุณต้องการองค์ประกอบที่กำหนดเองของคุณจริงทำอะไรบางอย่างหรือไม่สามารถแสดงผลในลักษณะพิเศษบางอย่างที่คุณควรจะมองที่สเปองค์ประกอบที่กำหนดเอง

สำหรับไพรเมอร์ที่อ่อนโยนมากขึ้นเกี่ยวกับเรื่องนี้โปรดอ่านบทนำเว็บคอมโพเนนต์ซึ่งรวมถึงข้อมูลเกี่ยวกับ Shadow DOM และข้อกำหนดอื่น ๆ ที่เกี่ยวข้อง รายละเอียดเหล่านี้ยังคงใช้งานได้ในขณะนี้ - คุณสามารถดูสถานะปัจจุบันได้ที่นี่ - แต่กำลังพัฒนาอยู่

ตัวอย่างเช่นคำจำกัดความง่าย ๆ สำหรับgreetingองค์ประกอบอาจมีลักษณะดังนี้:

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

สิ่งนี้บอกให้เบราว์เซอร์แสดงเนื้อหาองค์ประกอบในเครื่องหมายคำพูดและนำหน้าด้วยข้อความ "Simon says:" ซึ่งมีสไตล์ด้วยสีเทา โดยทั่วไปคำจำกัดความองค์ประกอบที่กำหนดเองเช่นนี้จะถูกเก็บไว้ในไฟล์ html แยกต่างหากที่คุณจะนำเข้าพร้อมลิงก์

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

แม้ว่าคุณจะสามารถรวมอินไลน์ได้หากคุณต้องการ

ฉันได้สร้างการสาธิตการทำงานของคำนิยามดังกล่าวข้างต้นโดยใช้ห้องสมุด polyfill ลิเมอร์ที่คุณสามารถดูที่นี่ โปรดทราบว่านี่เป็นการใช้ไลบรารี Polymer รุ่นเก่า - เวอร์ชั่นล่าสุดทำงานแตกต่างกันมาก อย่างไรก็ตามด้วยสเป็คยังอยู่ในการพัฒนานี่ไม่ใช่สิ่งที่ฉันอยากจะแนะนำให้ใช้ในรหัสการผลิตต่อไป

เพียงแค่ใช้สิ่งที่คุณต้องการโดยไม่มีการประกาศ Dom

<container>content here</container>

เพิ่มสไตล์ของคุณเอง (display: block) และมันจะทำงานกับเบราว์เซอร์ที่ทันสมัย

data-*คุณลักษณะที่ถูกต้องในHTML5และแม้กระทั่งใน HTML4 เว็บเบราว์เซอร์ทั้งหมดที่ใช้ในการเคารพพวกเขา การเพิ่มแท็กใหม่นั้นใช้งานได้ดี แต่ไม่แนะนำให้ทำเพราะ:

1. อาจขัดแย้งกับสิ่งที่เพิ่มเข้ามาในอนาคตและ
2. ทำให้เอกสาร HTML ไม่ถูกต้องยกเว้นว่ามีการเพิ่มแบบไดนามิกผ่าน JavaScript

ฉันจะใช้แท็กที่กำหนดเองเฉพาะในสถานที่ที่ Google ไม่ดูแลสำหรับ ecample ใน iframe เครื่องยนต์เกมผมทำ<log>แท็กที่มี<msg>, <error>และ<warning>- แต่ผ่านJavaScriptเท่านั้น และมันก็ใช้งานได้อย่างสมบูรณ์ตามตัวตรวจสอบความถูกต้อง มันยังใช้งานได้ใน Internet explorer ด้วยสไตล์ของมัน! ;]

แท็กที่กำหนดเองไม่ถูกต้องใน HTML5 แต่ปัจจุบันเบราว์เซอร์รองรับการแยกวิเคราะห์และคุณสามารถใช้เบราว์เซอร์ได้โดยใช้ CSS ดังนั้นหากคุณต้องการใช้แท็กที่กำหนดเองสำหรับเบราว์เซอร์ปัจจุบันคุณก็สามารถทำได้ แต่การสนับสนุนอาจถูกนำไปใช้เมื่อเบราว์เซอร์ใช้มาตรฐาน W3C อย่างเคร่งครัดสำหรับการแยกวิเคราะห์เนื้อหา HTML

ฉันรู้ว่าคำถามนี้เก่า แต่ฉันได้ศึกษาเรื่องนี้แล้วและแม้ว่าข้อความข้างต้นบางส่วนนั้นถูกต้อง แต่ก็ไม่ใช่วิธีเดียวในการสร้างองค์ประกอบที่กำหนดเอง ตัวอย่างเช่น:

<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 และ Safari มือถือรุ่นใหม่กว่า) สิ่งที่คุณต้องมีเพียงแค่ตัวอักษรอัลฟ่า (az, AZ) เพื่อเริ่มแท็กจากนั้นคุณสามารถใช้อักขระที่ไม่ใช่อัลฟาหลังจากนั้น หากใน CSS คุณต้องใช้ "\" (แบ็กสแลช) เพื่อค้นหาองค์ประกอบเช่นจะต้องใช้ Query \ ^ {... } แต่ใน JS คุณเรียกมันอย่างที่คุณเห็น ฉันหวังว่านี่จะช่วยได้ ดูตัวอย่างได้ที่นี่

-Mink CBOS