맞춤 요소가 유효한 HTML5입니까?

다음과 같이 HTML5에서 맞춤 태그가 유효한지 여부에 대한 확실한 답변을 찾을 수 없습니다.

<greeting>Hello!</greeting>

나는 어느 쪽이든 사양에서 아무것도 발견하지 못했다.

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

그리고 커스텀 태그는 W3C 유효성 검사기를 사용하여 유효성을 검사하지 않는 것 같습니다.

사용자 정의 요소 사양은 크롬과 오페라에서 사용할 수있는, 그리고 제공되고 다른 브라우저 . 공식적인 방식으로 사용자 정의 요소를 등록하는 수단을 제공합니다.

사용자 정의 요소는 작성자가 정의 할 수있는 새로운 유형의 DOM 요소입니다. 상태 비 저장 및 임시 인 데코레이터 와 달리 사용자 정의 요소는 상태를 캡슐화하고 스크립트 인터페이스를 제공 할 수 있습니다.

사용자 지정 요소는 템플릿, HTML 가져 오기 및 Shadow DOM과 함께 Web Components 라는 더 큰 W3 사양의 일부입니다 .

웹 구성 요소를 사용하면 웹 응용 프로그램 작성자는 CSS만으로는 불가능한 수준의 시각적 풍부함과 상호 작용 성을 갖춘 위젯을 정의 할 수 있으며 오늘날 스크립트 라이브러리로는 구성 및 재사용이 용이하지 않습니다.

그러나이 훌륭한 기사 에서 맞춤 요소 v1에 대한 Google 개발자 기사 는 다음과 같습니다.

맞춤 요소의 이름은 대시 ( -)를 포함해야합니다 . 그래서 <x-tags>,<my-element> 그리고 <my-awesome-app>동안 모든 유효한 이름은이다 <tabs>와 <foo_bar>아니다. 이 요구 사항은 HTML 구문 분석기가 사용자 정의 요소를 일반 요소와 구별 할 수 있도록하기위한 것입니다. 또한 새로운 태그가 HTML에 추가 될 때 호환성을 보장합니다.

일부 자료

• 웹 구성 요소 예는 https://WebComponents.org 에서 제공됩니다.
• WebComponents.js은 그들이 어디에서나 지원 될 때까지 웹 구성 요소에 대한 polyfill 역할을합니다. 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 또는 caption 요소 이외의 테이블 요소에있는 것은 아닙니다. 후자는 확장하는 요소가 어디를 가든 갈 수 있습니다.

이는 실제로 요소의 컨텐츠 모델이 누적 된 결과입니다.

예를 들어 루트 요소는 요소 여야합니다 html.

html소자만을 포함 할 수있다 몸체 요소 뒤에 헤드 소자.

body요소 만 포함 할 수 있습니다 유량 콘텐츠 플로우는 콘텐츠 요소로서 정의된다 : a, abbr, 주소, 지역 (지도 요소의 후손 인 경우), 기사, 옆으로, 오디오, b, bdi, bdo, 블록 인용, br, 버튼, 캔버스, 인용, 코드, 명령, 데이터 목록, 델, 세부 사항 , dfn, div dl, em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, i, iframe, img, 입력, ins, kbd, keygen, 레이블,지도, 마크, 수학, 메뉴, 미터, 탐색, noscript, 개체, ol, 출력, p, pre, 진행, q, 루비, s, samp, 스크립트, 섹션, 선택, 작은, 범위, 강한, 스타일 ( 범위가 지정된 속성이있는 경우), sub, sup, svg, table, textarea, time,u, ul, var, video, 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 프로세서의 경우)에 따라 스타일을 지정하지만 그 의미는 유추하지 않아야합니다."

"사용자 에이전트는 부적합한 문서를 원하는대로 자유롭게 처리 할 수 ​​없습니다.이 사양에 설명 된 처리 모델은 입력 문서의 적합성에 관계없이 구현에 적용됩니다."

"이 사양에서 정의하지 않은 HTML 요소에는 HTMLUnknownElement 인터페이스를 사용해야합니다."

W3C-HTML5 : 문서 작성
WhatWG-HTML 표준 : DOM 요소

나는 "유효한"이라는 단어가이 문맥에서 두 가지 다른 의미를 가질 수 있음을 지적하고 싶습니다.

1. 사용자 정의 태그가있는 HTML 문서를 유효한 HTML5로 간주해야합니까? 이에 대한 대답은 분명히 "아니오"입니다. 스펙 은 어떤 컨텍스트에서 어떤 태그가 유효한지 정확하게 나열합니다. 그렇기 때문에 HTML 유효성 검사기는 사용자 정의 태그가 있거나 잘못된 위치에 표준 태그가있는 문서 (예 : 머리글의 "img"태그)를 허용하지 않습니다.

2. 사용자 정의 태그가있는 HTML 문서가 브라우저에서 명확하게 정의 된 표준 방식으로 구문 분석되고 렌더링됩니까? 아마도 놀랍게도 그 대답은 "예"입니다. 문서가 기술적으로 유효한 HTML5로 간주되지 않더라도 HTML5 사양 은 그들은 사용자 정의 태그를 볼 때 어떻게해야 정확히 브라우저 : 즉, 사용자 정의 태그는 현물 등의 역할을 <span>- 그것은 아무 의미에 의해 아무것도하지 않습니다 기본값이지만 HTML로 스타일을 지정할 수 있으며 javascript로 액세스 할 수 있습니다.

커스텀 HTML 요소는 파서로 커스텀 요소를 선언하고 등록 할 수있게 해주는 W3 표준입니다. W3 Web Components Custom Elements spec . 또한 Microsoft는 X-Tag 라고하는 라이브러리 (이전 Mozilla 개발자가 작성)를 지원하므로 웹 구성 요소를보다 쉽게 ​​사용할 수 있습니다.

최신 페이지를 반영하여 업데이트 된 답변을 제공합니다.

맞춤 태그는

1) 대시가 포함되어 있습니다.

<my-element>

2) 그들은 XML이 내장되어 있습니다

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

이것은 HTML5 doctype을 사용한다고 가정합니다. <!doctype html>

지금 의미가 간단한 제한을 감안하면 유지하기 위해 최선을 다하는 HTML 마크 업 같은 태그를 폐쇄 중지하십시오 (유효 <img>및<hr> 당신은 아마 필요가없는 XHTML의 문서 타입을 사용하지 않는 한, 그것은 바보 잘못된).

HTML5가 구문 분석 규칙을 명확하게 정의한다고 가정하면, 호환 브라우저는 엄격하게 유효하지 않더라도 태그를 처리 할 수 ​​있습니다.

HTML5 사양 의 확장 성 섹션 에서 인용 :

XML 직렬화로 제한 될 수 있고 HTML 직렬화에서 지원 될 필요가없는 마크 업 수준 기능의 경우 공급 업체는 네임 스페이스 메커니즘을 사용하여 비표준 요소 및 특성이 지원되는 사용자 지정 네임 스페이스를 정의해야합니다.

따라서 HTML5의 XML 직렬화를 사용하는 경우 다음과 같은 작업을 수행하는 것이 합법적입니다.

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

원하는 경우 인라인으로 포함시킬 수도 있습니다.

여기에서 볼 수있는 Polymer polyfill 라이브러리를 사용하여 위의 정의에 대한 실무 데모를 만들었습니다 . 이것은 이전 버전의 Polymer 라이브러리를 사용하고 있습니다. 최신 버전은 상당히 다르게 작동합니다. 그러나 사양이 아직 개발 중이므로 어쨌든 프로덕션 코드에서 사용하는 것이 좋습니다.

DOM 선언없이 원하는 것을 사용하십시오.

<container>content here</container>

나만의 스타일을 추가하고 (display : block) 최신 브라우저에서 작동합니다

data-*속성은 HTML5 및 HTML4에서도 유효하며 모든 웹 브라우저는이를 존중합니다. 새로운 태그를 추가하는 것은 기술적으로 괜찮지 만 다음과 같은 이유로 권장되지는 않습니다.

1. 나중에 추가 된 내용과 충돌 할 수 있습니다.
2. JavaScript를 통해 동적으로 추가하지 않으면 HTML 문서를 유효하지 않게 만듭니다.

나는 구글이 게임 엔진은 iframe에 ecample에 대한 상관하지 않는 유일한 장소에서 사용자 정의 태그를 사용하여, 내가 만든 <log>포함 된 태그 <msg>, <error>와 <warning>-하지만 통해 자바 스크립트 만. 그리고 유효성 검사기에 따르면 완전히 유효했습니다. 심지어 인터넷 익스플로러에서도 스타일링이 가능합니다! ;]

맞춤 태그는 HTML5에서 유효하지 않습니다. 그러나 현재 브라우저는 구문 분석을 지원하며 CSS를 사용하여 사용할 수 있습니다. 따라서 현재 브라우저에 사용자 정의 태그를 사용하려면 할 수 있습니다. 그러나 브라우저가 HTML 컨텐츠를 구문 분석하기 위해 W3C 표준을 엄격하게 구현하면 지원이 중단 될 수 있습니다.

나는이 질문이 오래되었다는 것을 알고 있지만이 주제를 연구하고 있으며 위의 내용 중 일부는 정확하지만 맞춤 요소를 만드는 유일한 방법은 아닙니다. 예를 들면 다음과 같습니다.

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

최신 버전의 Chrome, IE, FireFox 및 모바일 Safari에서는 완벽하게 작동합니다. 태그를 시작하기 위해 알파벳 문자 (az, AZ) 만 있으면됩니다. 그 다음에 알파벳 이외의 문자를 사용할 수 있습니다. CSS에서 요소를 찾으려면 "\"(백 슬래시)를 사용해야합니다 (예 : Query \ ^ {...} 필요). 그러나 JS에서는 당신이 그것을 보는 방법이라고 부릅니다. 이것이 도움이되기를 바랍니다. 여기 예를 참조 하십시오

-Mink CBOS