发表新帖
发表新帖

Are custom elements valid HTML5?

后端 未结
关注
12 1231
执念已碎
执念已碎 2020-11-22 09:27

I\'ve been unable to find a definitive answer to whether custom tags are valid in HTML5, like this:

Hello!

相关标签:
12条回答
  • 失恋的感觉
    2020-11-22 09:53

    I would like to point out that the word "valid" can have two different meanings in this context, either of which is potentially, um, valid.

    1. Should an HTML document with custom tags be considered valid HTML5? The answer to this is clearly "no." The spec lists exactly what tags are valid in what contexts. This is why an HTML validator will not accept a document with custom tags, or with standard tags in the wrong places (like an "img" tag in the header).

    2. Will an HTML document with custom tags be parsed and rendered in a standard, clearly-defined way across browsers? Here, perhaps surprisingly, the answer is "yes." Even though the document would not technically be considered valid HTML5, the HTML5 spec does specify exactly what browsers are supposed to do when they see a custom tag: in short, the custom tag acts kind of like a <span> - it means nothing and does nothing by default, but it can be styled by HTML and accessed by javascript.

    0 讨论(0)
  • 执笔经年
    2020-11-22 09:53

    I know this question is old, but I have been studying this subject and though some of the above statements are correct, they aren't the only way to create custom elements. For example: 

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

    would work perfectly fine ( in newer versions of Google Chrome, IE, FireFox, and mobile Safari so far ). All you need is just an alpha character (a-z, A-Z) to start the tag, and then you can use any of the non alpha characters after. If in CSS, you must use the "\" (backslash) in order to find the element, such as would need Query\^ { ... } . But in JS, you just call it how you see it. I hope this helps out. See example here

    -Mink CBOS

    0 讨论(0)
  • 刺人心
    2020-11-22 10:02

    To give an updated answer reflecting modern pages.

    Custom tags are valid if either,

    1) They contain a dash 

    <my-element>

    2) They are embedded XML 

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

    This assumes you are using the HTML5 doctype <!doctype html>

    Considering these simple restrictions it now makes sense to do your best to keep your HTML markup valid (please stop closing tags like <img> and <hr>, it's silly and incorrect unless you use an XHTML doctype, which you probably have no need for).

    Given that HTML5 clearly defines the parsing rules a compliant browser will be able to handle any tag that you throw at it even if it isn't strictly valid.

    0 讨论(0)
  • 清歌不尽
    2020-11-22 10:03

    Custom HTML elements are an emerging W3 standard I have been contributing to that enables you to declare and register custom elements with the parser, you can read the spec here: W3 Web Components Custom Elements spec. Additionally, Microsoft supports a library (written by former Mozilla devs), called X-Tag - it makes working with Web Components even easier.

    0 讨论(0)
  • 夕颜
    2020-11-22 10:03

    Quoting from the Extensibility section of the HTML5 specification:

    For markup-level features that can be limited to the XML serialization and need not be supported in the HTML serialization, vendors should use the namespace mechanism to define custom namespaces in which the non-standard elements and attributes are supported.

    So if you're using the XML serialization of HTML5, its legal for you to do something like this:

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

    However, if you're using the HTML syntax you are much more limited in what you can do.

    For markup-level features that are intended for use with the HTML syntax, extensions should be limited to new attributes of the form "x-vendor-feature" [...] New element names should not be created.

    But those instructions are primarily directed at browser vendors, who would assumedly be providing visual styling and functionality for whatever custom elements they chose to create.

    For an author, though, while it may be legal to embed a custom element in the page (at least in the XML serialization), you're not going to get anything more than a node in the DOM. If you want your custom element to actually do something, or be rendered in some special way, you should be looking at the Custom Elements specification.

    For a more gentle primer on the subject, read the Web Components Introduction, which also includes information about the Shadow DOM and other related specifications. These specs are still working drafts at the moment - you can see the current status here - but they are being actively developed.

    As an example, a simple definition for a greeting element might look something like this:

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

    This tells the browser to render the element content in quotes, and prefixed by the text "Simon says:" which is styled with the color gray. Typically a custom element definition like this would be stored in a separate html file that you would import with a link.

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

    Although you can also include it inline if you want.

    I've created a working demonstration of the above definition using the Polymer polyfill library which you can see here. Note that this is using an old version of the Polymer library - more recent versions work quite differently. However, with the spec still in development, this is not something I would recommend using in production code anyway.

    0 讨论(0)
  • 失恋的感觉
    2020-11-22 10:05

    It's possible and allowed:

    User agents must treat elements and attributes that they do not understand as semantically neutral; leaving them in the DOM (for DOM processors), and styling them according to CSS (for CSS processors), but not inferring any meaning from them.

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

    But, if you intend to add interactivity, you'll need to make your document invalid (but still fully functional) to accomodate IE's 7 and 8.

    See http://blog.svidgen.com/2012/10/building-custom-xhtml5-tags.html (my blog)

    0 讨论(0)
 看不清?
提交回复
热议问题