w3c標準 H5規(guī)范中規(guī)定:自定義元素必須至少包含一個連字符,即最簡形式也要這樣a-b
比如:
<hello></hello>這樣會出錯
<hell-o></hell-o>這樣才對
下邊是demo代碼
index.html:
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="import" href="demo.html">
<title>html自定義標簽</title>
</head>
<body>
<hell-o></hell-o>
<h1>abc</h1>
</body>
</html>
demo.html:
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
</head>
<body>
<template id="hello">
? ? <style type="text/css">
? ? ? ? h1{color:red;}
? ? </style>
? ? <h1>hello</h1>
</template>
<script type="text/javascript">
? ? var indexDoc=document,
? ? ? ? helloDoc=(indexDoc._currentScript || indexDoc.currentScript).ownerDocument,
? ? ? ? tmpl=helloDoc.querySelector('#hello'),
? ? ? ? HelloProto=Object.create(HTMLElement.prototype);
? ? HelloProto.createdCallback=function(){
? ? ? ? var roots=this.createShadowRoot();? ? ? ?
? ? ? ? roots.appendChild(indexDoc.importNode(tmpl.content,true));
? ? };
? ? var Hello=indexDoc.registerElement('hell-o',{
? ? ? ? prototype:HelloProto
? ? });
</script>
</body>
</html>