Both HTML and HTML5 can have custom tags. After browsing the source code of some websites, you will find that some pages have tags and elements that you do not recognize, but these elements can be executed by the browser. This is the custom element.

By freely defining tags instead of having to use predefined semantic tags, we can more semantically customize our content.

Before HTML5, documents were marked like this at the beginning.

<! PUBLIC DOCTYPE HTML "- / / / / W3C DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > <html xmlns = "http://www.w3.org/1999/xhtml">

The markup of a document in HTML5 looks like this. 

<! DOCTYPE> <html>

This will result in some new H5 elements such as headers and footers. In tests, IE was found to be unable to parse the new H5 elements. But when we add some style to these elements, it can be interpreted by the browser.

Components are the direction of Web development, and JavaScript components are the hot spot right now, but HTML components may hold more promise in the future.

Browser processing

We usually use standard HTML elements.


In face code, <p> is the standard HTML element.

What happens if you use non-standard custom elements? 

<greeting>Hello World</greeting>

In the code above, <greeting> is a non-standard element that the browser does not recognize. The result of running this code is that the browser displays Hello World as usual, indicating that the browser has not filtered this element.

Now, style the custom element. 

greeting {

 display: block;

 font-size: 36px;

 color: red;

}

The running results are as follows

The picture

Next, use the script to manipulate the element. 

function customTag(tagName, fn){ Array .from(document.getElementsByTagName(tagName)) .forEach(fn); } function GreetingHandler (element) {element.innerHtml = 'Hello, World '; }` customTag('greeting', greetingHandler);

The results are as follows

The picture

This means that the browser treats the custom elements just as it treats standard elements, but without the default style and behavior. This type of processing is write
HTML 5 standardthe 

As you can see from the above test results, custom tags can be displayed normally, can use CSS styles, and can be controlled by JavaScript scripts

In fact, the browser provides an HtLunKnownElement object, of which all custom elements are instances. 

ar tabs = document.createElement('tabs');

tabs instanceof HTMLUnknownElement // true

tabs instanceof HTMLElement // true

In the above code, tabs is a custom element that inherits both the HtmlLunKnownElement and the HtmlElement interfaces.

import HTML

With custom elements, you can write very semantically good HTML code. 

<share-buttons> <social-button type="weibo"> <a href="..." > weibo < / a > < / social button - > < social - the button type = "weixin" > < a href = "..." > WeChat </a> </social-button> </ shared-button >

The above code, at a glance can see the semantics.

The < shared-buttons > element can be reused if its style and script are encapsulated in an HTML file called share-buttons.html.

To do so, introduce share-buttons.html.

<link rel="import" href="share-buttons.html">

You can then use < shared-buttons > in your web page. 

<article> <h1>Title</h1> <share-buttons/> ... . </article>