Các yếu tố tùy chỉnh HTML5 có hợp lệ không?

Tôi đã không thể tìm thấy câu trả lời dứt khoát về việc các thẻ tùy chỉnh có hợp lệ trong HTML5 hay không, như thế này:

<greeting>Hello!</greeting>

Tôi không tìm thấy gì theo cách này hay cách khác:

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

Và các thẻ tùy chỉnh dường như không xác thực với trình xác nhận W3C.

Đặc tả Yếu tố tùy chỉnh có sẵn trong Chrome và Opera và trở nên khả dụng trong các trình duyệt khác . Nó cung cấp một phương tiện để đăng ký các yếu tố tùy chỉnh một cách chính thức.

Các phần tử tùy chỉnh là các loại phần tử DOM mới có thể được xác định bởi các tác giả. Không giống như các nhà trang trí , không trạng thái và phù du, các yếu tố tùy chỉnh có thể gói gọn trạng thái và cung cấp giao diện tập lệnh.

Các phần tử tùy chỉnh là một phần của đặc tả W3 lớn hơn được gọi là Các thành phần Web , cùng với Mẫu, Nhập khẩu HTML và Shadow DOM.

Các thành phần Web cho phép các tác giả ứng dụng Web xác định các widget với mức độ phong phú và tương tác trực quan không thể có với CSS, và dễ dàng sáng tác và tái sử dụng với các thư viện tập lệnh ngày nay.

Tuy nhiên, từ bài viết tuyệt vời này qua bài viết trên Google Developers về Custom Elements v1:

Tên của một thành phần tùy chỉnh phải chứa dấu gạch ngang ( -). Vì vậy <x-tags>, <my-element>và <my-awesome-app>tất cả đều là tên hợp lệ, trong khi <tabs>và <foo_bar>không. Yêu cầu này là để trình phân tích cú pháp HTML có thể phân biệt các yếu tố tùy chỉnh với các yếu tố thông thường. Nó cũng đảm bảo khả năng tương thích về phía trước khi các thẻ mới được thêm vào HTML.

Một số tài nguyên

• Các thành phần Web mẫu có sẵn tại https://WebComponents.org
• WebComponents.js đóng vai trò là một polyfill cho các Thành phần Web cho đến khi chúng được hỗ trợ ở mọi nơi. Xem thêm trang hỗ trợ trình duyệt web & trang web WebComponents.js .

Điều đó là có thể và được phép:

Tác nhân người dùng phải coi các yếu tố và thuộc tính mà họ không hiểu là trung lập về mặt ngữ nghĩa; để chúng trong DOM (cho bộ xử lý DOM) và tạo kiểu cho chúng theo CSS (đối với bộ xử lý CSS), nhưng không suy ra bất kỳ ý nghĩa nào từ chúng.

http://www.w3.org/TR/html5/infr Hạ tầng.html # extensibility-0

Nhưng, nếu bạn có ý định thêm tính tương tác, bạn sẽ cần làm cho tài liệu của mình không hợp lệ (nhưng vẫn đầy đủ chức năng) để chứa các 7 và 8 của IE.

Xem http://blog.svidgen.com/2012/10/building-custom-xhtml5-tags.html (blog của tôi)

NB Câu trả lời dưới đây là chính xác khi nó được viết vào năm 2012. Kể từ đó, mọi thứ đã thay đổi một chút. Hiện tại, đặc tả HTML xác định hai loại yếu tố tùy chỉnh - "yếu tố tùy chỉnh tự trị" và "yếu tố tích hợp tùy chỉnh". Các cựu có thể đi bất cứ nơi nào nội dung phrasing dự kiến; đó là hầu hết các vị trí bên trong cơ thể, nhưng không phải là các phần tử ul hoặc ol, hoặc trong các phần tử bảng khác với các phần tử td, th hoặc chú thích. Cái sau có thể đi bất cứ nơi nào mà phần tử mà chúng mở rộng có thể đi.

Đây thực sự là một hệ quả của sự tích lũy mô hình nội dung của các yếu tố.

Ví dụ, phần tử gốc phải là mộthtml phần tử.

Phần htmltử chỉ có thể chứa phần tử đầu A theo sau là phần tử cơ thể.

Phần bodytử chỉ có thể chứa nội dung Flow trong đó nội dung luồng được xác định là các phần tử: a, abbr, địa chỉ, khu vực (nếu là hậu duệ của một yếu tố bản đồ), bài viết, sang một bên, âm thanh, b, bdi, bdo, blockquote, br, nút, canvas, trích dẫn, mã, lệnh, datalist, del, chi tiết , dfn, div dl, em, embed, fieldset, hình, footer, form, h1, h2, h3, h4, h5, h6, tiêu đề, hgroup, hr, i, iframe, img, input, in, kbd, keygen, nhãn, bản đồ, đánh dấu, toán học, menu, mét, nav, noscript, object, ol, output, p, pre, tiến trình, q, ruby, s, samp, script, phần, select, small, span, strong, style ( nếu thuộc tính phạm vi có mặt), phụ, sup, svg, bảng, textarea, thời gian,u, ul, var, video, wbr và văn bản

và như thế.

Không có lúc nào mô hình nội dung nói "bạn có thể đặt bất kỳ yếu tố nào bạn thích trong cái này", điều này sẽ cần thiết cho các yếu tố / thẻ tùy chỉnh.

Các yếu tố và thuộc tính tùy chỉnh cơ bản

Các yếu tố và thuộc tính tùy chỉnh là hợp lệ trong HTML, với điều kiện:

• Tên phần tử là chữ thường và bắt đầu bằng x-
• Tên thuộc tính là chữ thường và bắt đầu bằng data-

Ví dụ, <x-foo data-bar="gaz"/>hoặc <br data-bar="gaz"/>.

Một quy ước chung cho các yếu tố là x-foo; x-vendor-featuređược khuyến khích.

Điều này xử lý hầu hết các trường hợp, vì rất hiếm khi nhà phát triển sẽ cần tất cả sức mạnh đi kèm với việc đăng ký các yếu tố của họ. Cú pháp cũng đầy đủ hợp lệ và ổn định. Một lời giải thích chi tiết hơn dưới đây.

Các yếu tố và thuộc tính tùy chỉnh nâng cao

Kể từ năm 2014, có một cách mới, được cải tiến nhiều để đăng ký các yếu tố và thuộc tính tùy chỉnh. Nó sẽ không hoạt động trong các trình duyệt cũ hơn như IE 9 hoặc Chrome / Firefox 20. Nhưng nó cho phép bạn sử dụng HTMLElementgiao diện chuẩn , ngăn va chạm, sử dụng không x-*và không-data-* tên tên và xác định hành vi và cú pháp tùy chỉnh để trình duyệt tôn trọng . Nó đòi hỏi một chút JavaScript ưa thích, như chi tiết trong các liên kết dưới đây.

Đá HTML5 - Xác định các thành phần mới trong HTML
WebComponents.org - Giới thiệu về các thành phần tùy chỉnh
W3C - Thành phần web: Các thành phần tùy chỉnh

Về tính hợp lệ của cú pháp cơ bản

Sử dụng data-* cho tên thuộc tính tùy chỉnh đã hoàn toàn hợp lệ trong một thời gian và thậm chí hoạt động với các phiên bản HTML cũ hơn.

W3C - HTML5: Khả năng mở rộng

Đối với các tên thành phần tùy chỉnh (chưa đăng ký), W3C khuyến nghị mạnh mẽ chống lại chúng và coi chúng không tuân thủ. Nhưng các trình duyệt được yêu cầu hỗ trợ chúng và các x-*định danh sẽ không xung đột với các thông số kỹ thuật HTML trong tương lai vàx-vendor-feature định danh sẽ không xung đột với các nhà phát triển khác. Một DTD tùy chỉnh có thể được sử dụng để làm việc xung quanh bất kỳ trình duyệt kén chọn nào.

Dưới đây là một số trích đoạn có liên quan từ các tài liệu chính thức:

"Thông số kỹ thuật có thể áp dụng CÓ THỂ xác định nội dung tài liệu mới (ví dụ: phần tử foobar) [...]. Nếu cú ​​pháp và ngữ nghĩa của tài liệu HTML5 tuân thủ nhất định không thay đổi khi sử dụng (các) thông số kỹ thuật hiện hành, thì tài liệu đó vẫn là HTML5 phù hợp tài liệu. "

"Các tác nhân người dùng phải coi các thành phần và thuộc tính mà chúng không hiểu là trung lập về mặt ngữ nghĩa; để chúng trong DOM (đối với bộ xử lý DOM) và tạo kiểu cho chúng theo CSS (đối với bộ xử lý CSS), nhưng không suy ra bất kỳ ý nghĩa nào từ chúng."

"Các tác nhân người dùng không được tự do xử lý các tài liệu không phù hợp khi họ muốn; mô hình xử lý được mô tả trong thông số kỹ thuật này áp dụng cho việc triển khai bất kể sự phù hợp của các tài liệu đầu vào."

"Giao diện HTMLUn UnknownEuity phải được sử dụng cho các thành phần HTML không được xác định bởi thông số kỹ thuật này."

W3C - HTML5: Tuân thủ tài liệu
WhatWG - Tiêu chuẩn HTML: Các thành phần DOM

Tôi muốn chỉ ra rằng từ "hợp lệ" có thể có hai nghĩa khác nhau trong ngữ cảnh này, một trong hai từ này có khả năng, ừm, hợp lệ.

1. Tài liệu HTML có thẻ tùy chỉnh có được coi là HTML5 hợp lệ không? Câu trả lời cho điều này rõ ràng là "không." Thông số kỹ thuật liệt kê chính xác các thẻ hợp lệ trong bối cảnh nào. Đây là lý do tại sao trình xác thực HTML sẽ không chấp nhận tài liệu có thẻ tùy chỉnh hoặc với thẻ tiêu chuẩn ở sai vị trí (như thẻ "img" trong tiêu đề).

2. Một tài liệu HTML với các thẻ tùy chỉnh sẽ được phân tích cú pháp và hiển thị theo cách chuẩn, được xác định rõ ràng trên các trình duyệt? Ở đây, có lẽ đáng ngạc nhiên, câu trả lời là "có." Mặc dù tài liệu về mặt kỹ thuật sẽ không được coi là HTML5 hợp lệ, nhưng thông số HTML5 chỉ định chính xác những gì trình duyệt phải làm khi nhìn thấy thẻ tùy chỉnh: nói ngắn gọn, thẻ tùy chỉnh hoạt động giống như <span>- nó không có nghĩa gì và không làm gì cả mặc định, nhưng nó có thể được tạo kiểu bằng HTML và được truy cập bằng javascript.

Các phần tử HTML tùy chỉnh là một tiêu chuẩn W3 mới nổi mà tôi đã góp phần cho phép bạn khai báo và đăng ký các phần tử tùy chỉnh với trình phân tích cú pháp, bạn có thể đọc thông số ở đây: Thông số thành phần tùy chỉnh thành phần web của W3 . Ngoài ra, Microsoft hỗ trợ một thư viện (được viết bởi các nhà phát triển Mozilla trước đây), được gọi là X-Tag - nó giúp việc làm việc với các Thành phần Web trở nên dễ dàng hơn.

Để đưa ra một câu trả lời cập nhật phản ánh các trang hiện đại.

Thẻ tùy chỉnh hợp lệ nếu một trong hai,

1) Chúng chứa một dấu gạch ngang

<my-element>

2) Chúng được nhúng XML

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

Điều này giả định rằng bạn đang sử dụng loại tài liệu HTML5 <!doctype html>

Xem xét những hạn chế đơn giản này, giờ đây bạn nên cố gắng hết sức để giữ cho đánh dấu HTML của bạn hợp lệ (vui lòng dừng đóng các thẻ như <img>và <hr>, thật ngớ ngẩn và không chính xác trừ khi bạn sử dụng loại tài liệu XHTML mà bạn có thể không cần).

Do HTML5 xác định rõ các quy tắc phân tích cú pháp, trình duyệt tuân thủ sẽ có thể xử lý bất kỳ thẻ nào bạn ném vào nó ngay cả khi nó không hợp lệ.

Trích dẫn từ phần Khả năng mở rộng của đặc tả HTML5 :

Đối với các tính năng ở mức đánh dấu có thể giới hạn trong tuần tự hóa XML và không cần được hỗ trợ trong tuần tự hóa HTML, các nhà cung cấp nên sử dụng cơ chế không gian tên để xác định các không gian tên tùy chỉnh trong đó các yếu tố và thuộc tính không chuẩn được hỗ trợ.

Vì vậy, nếu bạn đang sử dụng tuần tự hóa XML của HTML5, việc bạn làm điều gì đó như thế này là hợp pháp:

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

Tuy nhiên, nếu bạn đang sử dụng cú pháp HTML, bạn sẽ bị hạn chế hơn nhiều về những gì bạn có thể làm.

Đối với các tính năng ở mức đánh dấu được sử dụng cho cú pháp HTML, các tiện ích mở rộng phải được giới hạn ở các thuộc tính mới của mẫu "x-nhà cung cấp tính năng" [...] Không nên tạo tên thành phần mới.

Nhưng những hướng dẫn đó chủ yếu hướng đến các nhà cung cấp trình duyệt, những người được cho là sẽ cung cấp kiểu dáng và chức năng trực quan cho bất kỳ yếu tố tùy chỉnh nào họ chọn để tạo.

Tuy nhiên, đối với một tác giả, mặc dù có thể hợp pháp khi nhúng một phần tử tùy chỉnh trong trang (ít nhất là trong tuần tự hóa XML), bạn sẽ không nhận được gì nhiều hơn một nút trong DOM. Nếu bạn muốn phần tử tùy chỉnh của mình thực sự làm một cái gì đó hoặc được hiển thị theo một cách đặc biệt nào đó, bạn nên xem đặc tả của Yếu tố tùy chỉnh .

Để có một đoạn mồi nhẹ nhàng hơn về chủ đề này, hãy đọc phần Giới thiệu Thành phần Web , bao gồm thông tin về Shadow DOM và các thông số kỹ thuật liên quan khác. Các thông số kỹ thuật này vẫn đang hoạt động dự thảo tại thời điểm này - bạn có thể thấy trạng thái hiện tại ở đây - nhưng chúng đang được tích cực phát triển.

Ví dụ, một định nghĩa đơn giản cho một greetingphần tử có thể trông giống như thế này:

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

Điều này cho trình duyệt hiển thị nội dung phần tử trong dấu ngoặc kép và được thêm tiền tố bởi văn bản "Simon nói:" được tạo kiểu với màu xám. Thông thường, một định nghĩa thành phần tùy chỉnh như thế này sẽ được lưu trữ trong một tệp html riêng mà bạn sẽ nhập bằng một liên kết.

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

Mặc dù bạn cũng có thể bao gồm nó nội tuyến nếu bạn muốn.

Tôi đã tạo ra một minh chứng làm việc về định nghĩa trên bằng thư viện Polycill mà bạn có thể thấy ở đây . Lưu ý rằng đây là sử dụng một phiên bản cũ của thư viện Polyme - các phiên bản gần đây hoạt động hoàn toàn khác. Tuy nhiên, với thông số kỹ thuật vẫn đang được phát triển, đây không phải là thứ tôi khuyên bạn nên sử dụng trong mã sản xuất.

chỉ cần sử dụng bất cứ điều gì bạn muốn mà không cần bất kỳ tuyên bố dom

<container>content here</container>

thêm phong cách của riêng bạn (display: block) và nó sẽ hoạt động với bất kỳ trình duyệt hiện đại nào

data-*các thuộc tính hợp lệ trong HTML5 và thậm chí trong HTML4, tất cả các trình duyệt web được sử dụng để tôn trọng chúng. Thêm thẻ mới về mặt kỹ thuật là ổn, nhưng không được khuyến khích chỉ vì:

1. Nó có thể xung đột với một cái gì đó được thêm vào trong tương lai, và
2. Làm cho tài liệu HTML không hợp lệ trừ khi được thêm động qua JavaScript.

Tôi sử dụng thẻ tùy chỉnh chỉ ở những nơi mà Google không quan tâm, cho ecample trong một iframe công cụ trò chơi, tôi đã làm một <log>thẻ có chứa <msg>, <error>và <warning>- nhưng thông qua JavaScript chỉ. Và nó đã hoàn toàn hợp lệ, theo trình xác nhận. Nó thậm chí hoạt động trong Internet explorer với kiểu dáng của nó! ;]

Thẻ tùy chỉnh không hợp lệ trong HTML5. Nhưng hiện tại các trình duyệt đang hỗ trợ phân tích chúng và bạn cũng có thể sử dụng chúng bằng css. Vì vậy, nếu bạn muốn sử dụng các thẻ tùy chỉnh cho các trình duyệt hiện tại thì bạn có thể. Nhưng hỗ trợ có thể bị lấy đi một khi các trình duyệt thực hiện các tiêu chuẩn W3C một cách nghiêm ngặt để phân tích nội dung HTML.

Tôi biết câu hỏi này đã cũ, nhưng tôi đã nghiên cứu về chủ đề này và mặc dù một số câu trên là chính xác, chúng không phải là cách duy nhất để tạo các yếu tố tùy chỉnh. Ví dụ:

<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>

sẽ hoạt động hoàn toàn tốt (trong các phiên bản mới hơn của Google Chrome, IE, FireFox và Safari di động cho đến nay). Tất cả những gì bạn cần chỉ là một ký tự alpha (az, AZ) để bắt đầu thẻ và sau đó bạn có thể sử dụng bất kỳ ký tự không alpha nào sau đó. Nếu trong CSS, bạn phải sử dụng "\" (dấu gạch chéo ngược) để tìm phần tử, chẳng hạn như sẽ cần Truy vấn \ ^ {...}. Nhưng trong JS, bạn chỉ cần gọi nó như thế nào bạn nhìn thấy nó. Tôi hy vọng điều này sẽ giúp. Xem ví dụ ở đây

-Mink CBOS