如题所述
å建èªå®ä¹çHTMLå
ç´
document.registerElement() å½æ°ç¨æ¥å建èªå®ä¹çHTMLå ç´ ãå®å°è¿åä¸ä¸ªæé å½æ°ï¼å ¶ä¸æä¸ä¸ªåæ°é项ï¼ç¨æ¥å£°æèªå®ä¹HTMLå ç´ çå称ï¼å¦å¤æä¸ä¸ªå¯éåæ°é¡¹ï¼ç¨æ¥æè¿°ååç对象ï¼èªå®ä¹åè½çå ç´ ã
å¨ä¸é¢ç示ä¾ä¸ï¼ç®åçå建äºä¸ä¸ªæ°çHTMLå ç´ <x-treehouse> ï¼å¹¶ä¸å°å®æ¾å ¥å°é¡µé¢ä¸ï¼
var XTreehouseElement = document.registerElement('x-treehouse');
document.body.appendChild(new XTreehouseElement());
ä¸é¢çHTMLå°±ä¼æå ¥ <body> å ç´ å ï¼
<x-treehouse></x-treehouse>
èªå®ä¹å ç´ çå称 å¿ é¡»ä½¿ç¨è¿å符 - ï¼è¿æ ·æµè§å¨å°±å¯ä»¥åºåæ åå ç´ åèªå®ä¹å ç´ ãè¿ä¹æå³çï¼ä½ ä¸ä¼éå°ä¸ä¸ªæ°çHTMLå ç´ åä½ èªå·±å®ä¹å ç´ ä½¿ç¨ç¸åå称çé®é¢ã
ç»èªå®ä¹å ç´ å建JavaScript API
å¯ä»¥ç»èªå®ä¹å ç´ å建ä¸ä¸ªJavaScript API,è¿æ ·èªå®ä¹å ç´ å°±å ·å¤ä¸ç³»åçæ¹æ³åå±æ§ãè¦åå°è¿ä¸ç¹ï¼é¦å éè¦å建ä¸ä¸ªJavaScript对象ãå¯ä»¥éè¿ä½¿ç¨ Object.create() æ¹æ³ãå° HTMLElement.prototype ä¼ ç»è¿ä¸ªæ¹æ³ï¼å建ä¸ä¸ªå¯¹è±¡ãè¿ä¸ªå¯¹è±¡åæ åçHTMLçæ¹æ³åå±æ§ç¸åã
var XTreehouseProto = Object.create(HTMLElement.prototype);
å¯ä»¥åä¸é¢è¿æ ·ï¼å¨è¿ä¸ªæ°å¯¹åä¸å®ä¹ä½ çéè¦çæ¹æ³ï¼
XTreehouseProto.hello = function(){
alert('Hello!');
}
ä½¿ç¨ Object.defineProperty() æ¹æ³ç»èªå®ä¹å ç´ å®ä¹ä¸ä¸ªå±æ§ãè¿ä¸ªæ¹æ³ç第ä¸ä¸ªåæ°æ¯éè¦å®ä¹å±æ§ç对象ï¼ç¬¬äºä¸ªåæ°æ¯é被å®ä¹æä¿®æ¹çå±æ§åï¼ç¬¬ä¸ä¸ªåæ°æ¯é被å®ä¹æä¿®æ¹çå±æ§çæ述符ãå¨è¿éä½ å¯ä»¥è®¾ç½®ä¸ä¸ªé»è®¤å¼æå®å±æ§æ¯å¯åè¿æ¯å¯è¯»ã
Object.defineProperty(XTreehouseProto, 'badges', {
value: 20,
writable : true
});
ä¸æ¦ç»èªå®ä¹å ç´ å®ä¹å¥½APIï¼éè¦éè¿ document.registerElement() æ¥è°ç¨ã使ç¨èªå®ä¹å ç´ çå称ä½ä¸ºç¬¬ä¸ä¸ªåæ°ï¼ç¶åç»å¯¹è±¡è®¾ç½®ä¸ºä¸ä¸ªå为 prototype çå±æ§ãè¿ä¸ªå±æ§çå¼åºè¯¥è®¾ç½®æ¨å¨åé¢å建好çåå对象ã
var XTreehouseElement = document.registerElement('x-treehouse', {
prototype: XTreehouseProto
});
ä¸æ¦æ³¨åèªå®ä¹å ç´ ï¼å¯ä»¥å建ä¸ä¸ªæ°å ç´ ï¼å¹¶å°å ¶æ·»å å°é¡µé¢ä¸ã
var xtreehouse = new XTreehouseElement();
document.body.appendChild(xtreehouse);
å¯ä»¥åå ¶ä»çHTMLå ç´ ä¸æ ·ä½¿ç¨åé¢å®ä¹å¥½çæ¹æ³åå±æ§ã
xtreehouse.hello();
var badges = xtreehouse.badges;
æ©å±ç°æçå ç´
æ£å¦å建çèªå®ä¹å ç´ ï¼è¿å¯ä»¥ä½¿ç¨ registerElement() æ¹æ³æ¥æ©å±ç°æçHTMLå ç´ çåè½ãæ¯å¦æ们å¯ä»¥æ©å± <img> å ç´ æ¥å建ä¸ä¸ªå¸¦åéç缩ç¥å¾æ¾ç¤ºã
åä¹åé£æ ·å å建ä¸ä¸ªå¯¹è±¡ååãä¸è¿è¿æ¬¡ï¼æ¯ä»ç°æçHTMLå ç´ ä¸æ¥æ©å±å¯¹è±¡ååãå¨è¿ä¸ªç¤ºä¾ä¸ï¼æ©å±çæ¯ HTMLImageElement ã
var ThumbImageProto = Object.create(HTMLImageElement.prototype);
æ¥ä¸æ¥ä½¿ç¨ createCallback å®ä¹ä¸ä¸ªå½æ°ï¼åè°å½æ°ï¼ï¼å¨å建å ç´ æ¶å°±å®ä¹äºå¾åç width å height ã
ThumbImageProto.createdCallback = function() {
this.width = '100';
this.height = '100';
};
è¿å¯ä»¥èªå®ä¹èªå·±çå±æ§åæ¹æ³ï¼
ThumbImageProto.changeImage = function() {
this.src = 'new-image.jpg';
};
å½ä½ æ³æ©å±å ç´ æ¶ï¼å¨ document.registerElement() å建å ç´ æ¶ï¼å¯ä»¥éè¿ç»å¯¹è±¡æ·»å extends å±æ§ãè¿ä¸ªå±æ§çå±æ§å¼å°±æ¯ä½ éè¦æ©å±çå ç´ å称ã
var ThumbImage = document.registerElement('thumb-img', {
prototype: ThumbImageProto,
extends: 'img'
});
è¦ä½¿ç¨èªå®ä¹å ç´ ï¼å¯ä»¥ç»å ç´ æå®ä¸ä¸ªå±æ§æ¥æ©å±å ç´ ãè¿ä¸ªå±æ§çå¼æ¯èªå®ä¹çå ç´ å称ï¼å¯ä»¥åè¯æµè§å¨ <img> 使ç¨äºèªå®ä¹çAPIï¼ thumb-img ã
<img is="thumb-img">
èªå®ä¹å ç´ åè°æ¹æ³
å建å管çèªå®ä¹å ç´ æ¶æå¾å¤åè°æ¹æ³å¯ä½¿ç¨ï¼
createdCallback : å ç´ å建åè°ç¨
attachedCallback : å ç´ éå å°ææ¡£åè°ç¨
detachedCallback : ä»ææ¡£ä¸ç§»é¤å ç´ åè°ç¨
attributeChangedCallback(attrName, oldValue, newValue) : å ç´ ä»»ä¸å±æ§åæ´åè°ç¨
æå®è¿äºåè°å½æ°çåå对象ï¼å¹¶ä¼ éç» document.registerElement() ã
var XTreehouseProto = Object.create(HTMLElement.prototype);
XTreehouseProto.createdCallback = function() {}
XTreehouseProto.attachedCallback = function() {}
XTreehouseProto.detachedCallback = function() {}
XTreehouseProto.attributeChangedCallback = function(attrName, oldValue, newValue) {}
var XTreehouse = document.registerElement('x-treehouse', { prototype: XTreehouseProto });
使ç¨Shadow DOMå建èªå®ä¹å ç´
èªå®ä¹å ç´ çæ£çå¨åå°±æ¯å¦ä½å Shadow DOM ä¸èµ·ä½¿ç¨ã使å¾å®å¾å®¹æå建å¯éç¨çç»ä»¶ã
å¨æ¥ä¸æ¥çå 容ä¸å°ççå¦ä½ä½¿ç¨Shadow DOMèªå®å ç´ ï¼æ¥å建ä¸ä¸ªç½ä¸ååºå¯å±ç¤ºçååãè¿éçæ³æ³æ¯ï¼Webå¼å人åå¯éè¿æ·»å ä¸è¡HTMLæ ç¾æ¥è½»æ¾çå建产åãéè¦æ¾ç¤ºç产å£ææä¿¡æ¯é½éè¿èªå®ä¹ç data- å±æ§æ¥å®æã
<x-product data-name="Product Name" data-img="image.png" data-url="http://example.com"></x-product>
é¦å åºäº HTMLElement.prototype å建ä¸ä¸ªæ°çåå对象ã
// Create a new object based of the HTMLElement prototype
var XProductProto = Object.create(HTMLElement.prototype);
æ¥ä¸æ¥ï¼æ们éè¦è®¾ç½®ä¸ä¸ª createdCallback å½æ°ãæ们å°è¦å建ä¸ä¸ª <img> å<a> å ç´ ï¼ç¨æ¥æ¾ç¤ºäº§åãå æ代ç å±ç¤ºä¸ä¸ï¼å详ç»ä»ç»ï¼
// Set up the element.
XProductProto.createdCallback = function() {
// Create a Shadow Root
var shadow = this.createShadowRoot();
// Create an img element and set it's attributes.
var img = document.createElement('img');
img.alt = this.getAttribute('data-name');
img.src = this.getAttribute('data-img');
img.width = '150';
img.height = '150';
img.className = 'product-img';
// Add the image to the Shadow Root.
shadow.appendChild(img);
// Add an event listener to the image.
img.addEventListener('click', function(e) {
window.location = this.getAttribute('data-url');
});
// Create a link to the product.
var link = document.createElement('a');
link.innerText = this.getAttribute('data-name');
link.href = this.getAttribute('data-url');
link.className = 'product-name';
// Add the link to the Shadow Root.
shadow.appendChild(link);
};
é¦å å建ä¸ä¸ªæ°çShadow DOMãå¦æä½ å¯¹Shadow DOMä¸çæï¼å¯ä»¥å é 读ä¹åçæç« ãç¶åå建ä¸ä¸ª <img> å ç´ ï¼å¹¶è®¾ç½®å ¶ alt ã src ã width å height å±æ§æå® x-product å ç´ çä¸äºä¿¡æ¯ã
注ï¼åè°å½æ°ï¼ this æçæ¯èªå®ä¹å ç´ çæ è®°ã
æ¥ä¸æ¥å° <img> å <a> å ç´ æ·»å å°Shadow rootä¸é¢ã并设置å ç´ çå±æ§å¼ä»èªå®ä¹å ç´ ç data- å±æ§è·åã
ç°å¨æ们éè¦æ³¨åèªå®ä¹å ç´ ï¼å¹¶ä¸å° x-product å ç´ ä¼ ç» document.registerElement() ï¼åæ¶æå®å¯¹è±¡åå为 XProductProto :
// Register the new element.
var XProduct = document.registerElement('x-product', {
prototype: XProductProto
});
为äºè®©é¡¹ç®å±ç¤ºæ´å¥½ï¼éè¦æ·»å ä¸äºCSS代ç ï¼
x-product {
display: inline-block;
float: left;
margin: 0.5em;
border-radius: 3px;
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
font-family: Helvetica, arial, sans-serif;
-webkit-font-smoothing: antialiased;
}
x-product::shadow .product-img {
cursor: pointer;
background: #FFF;
margin: 0.5em;
}
x-product::shadow .product-name {
display: block;
text-align: center;
text-decoration: none;
color: #08C;
border-top: 1px solid #EEE;
font-weight: bold;
padding: 0.75em 0;
}
为äºæ¾ç¤ºäº§åï¼æ们éè¦å° <x-product> å ç´ æ·»å å°HTML模æ¿ä¸ãä½¿ç¨ data-name ï¼ data-img å data-url å±æ§æå®äº§åç¸å ³æ°æ®ãå½é¡µé¢å è½½æ¶ï¼èªå®ä¹å ç´ å°±ä¼éè¿ createCallback æ¥è°ç¨å®ä»¬ã
<x-product data-name="Ruby" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/ruby.png" data-url="http://example.com/1"></x-product>
<x-product data-name="JavaScript" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/javascript.png" data-url="http://example.com/2"></x-product>
<x-product data-name="Python" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/python.png" data-url="http://example.com/3"></x-product>
å°±æ¯è¿æ ·ï¼ä½ ç°å¨å·²ç»ä½¿ç¨Shadow DOMèªå®ä¹äºä¸ä¸ªå ç´ ï¼æ¾ç¤ºä¸ç³»åç产åã
æµè§å¨æ¯æèªå®ä¹HTMLå ç´
Chrome 33+åOperaæ¯æèªå®ä¹å ç´ ãç¶èæä¸ä¸ªå¼ºå¤§ç polyfill å¯ä»¥è®©å ¶ä»çæµè§å¨ï¼æ¯å¦è¯´ Polymer å X-tags ã
å¯ä»¥ä½¿ç¨ registerElement() æ¹æ³æ£æµ document 对象æ¯å¦è¢«æµè§å¨æ¯æï¼
if ('registerElement' in document) {
// Supported.
} else {
// Not supported.
}
document.registerElement() å½æ°ç¨æ¥å建èªå®ä¹çHTMLå ç´ ãå®å°è¿åä¸ä¸ªæé å½æ°ï¼å ¶ä¸æä¸ä¸ªåæ°é项ï¼ç¨æ¥å£°æèªå®ä¹HTMLå ç´ çå称ï¼å¦å¤æä¸ä¸ªå¯éåæ°é¡¹ï¼ç¨æ¥æè¿°ååç对象ï¼èªå®ä¹åè½çå ç´ ã
å¨ä¸é¢ç示ä¾ä¸ï¼ç®åçå建äºä¸ä¸ªæ°çHTMLå ç´ <x-treehouse> ï¼å¹¶ä¸å°å®æ¾å ¥å°é¡µé¢ä¸ï¼
var XTreehouseElement = document.registerElement('x-treehouse');
document.body.appendChild(new XTreehouseElement());
ä¸é¢çHTMLå°±ä¼æå ¥ <body> å ç´ å ï¼
<x-treehouse></x-treehouse>
èªå®ä¹å ç´ çå称 å¿ é¡»ä½¿ç¨è¿å符 - ï¼è¿æ ·æµè§å¨å°±å¯ä»¥åºåæ åå ç´ åèªå®ä¹å ç´ ãè¿ä¹æå³çï¼ä½ ä¸ä¼éå°ä¸ä¸ªæ°çHTMLå ç´ åä½ èªå·±å®ä¹å ç´ ä½¿ç¨ç¸åå称çé®é¢ã
ç»èªå®ä¹å ç´ å建JavaScript API
å¯ä»¥ç»èªå®ä¹å ç´ å建ä¸ä¸ªJavaScript API,è¿æ ·èªå®ä¹å ç´ å°±å ·å¤ä¸ç³»åçæ¹æ³åå±æ§ãè¦åå°è¿ä¸ç¹ï¼é¦å éè¦å建ä¸ä¸ªJavaScript对象ãå¯ä»¥éè¿ä½¿ç¨ Object.create() æ¹æ³ãå° HTMLElement.prototype ä¼ ç»è¿ä¸ªæ¹æ³ï¼å建ä¸ä¸ªå¯¹è±¡ãè¿ä¸ªå¯¹è±¡åæ åçHTMLçæ¹æ³åå±æ§ç¸åã
var XTreehouseProto = Object.create(HTMLElement.prototype);
å¯ä»¥åä¸é¢è¿æ ·ï¼å¨è¿ä¸ªæ°å¯¹åä¸å®ä¹ä½ çéè¦çæ¹æ³ï¼
XTreehouseProto.hello = function(){
alert('Hello!');
}
ä½¿ç¨ Object.defineProperty() æ¹æ³ç»èªå®ä¹å ç´ å®ä¹ä¸ä¸ªå±æ§ãè¿ä¸ªæ¹æ³ç第ä¸ä¸ªåæ°æ¯éè¦å®ä¹å±æ§ç对象ï¼ç¬¬äºä¸ªåæ°æ¯é被å®ä¹æä¿®æ¹çå±æ§åï¼ç¬¬ä¸ä¸ªåæ°æ¯é被å®ä¹æä¿®æ¹çå±æ§çæ述符ãå¨è¿éä½ å¯ä»¥è®¾ç½®ä¸ä¸ªé»è®¤å¼æå®å±æ§æ¯å¯åè¿æ¯å¯è¯»ã
Object.defineProperty(XTreehouseProto, 'badges', {
value: 20,
writable : true
});
ä¸æ¦ç»èªå®ä¹å ç´ å®ä¹å¥½APIï¼éè¦éè¿ document.registerElement() æ¥è°ç¨ã使ç¨èªå®ä¹å ç´ çå称ä½ä¸ºç¬¬ä¸ä¸ªåæ°ï¼ç¶åç»å¯¹è±¡è®¾ç½®ä¸ºä¸ä¸ªå为 prototype çå±æ§ãè¿ä¸ªå±æ§çå¼åºè¯¥è®¾ç½®æ¨å¨åé¢å建好çåå对象ã
var XTreehouseElement = document.registerElement('x-treehouse', {
prototype: XTreehouseProto
});
ä¸æ¦æ³¨åèªå®ä¹å ç´ ï¼å¯ä»¥å建ä¸ä¸ªæ°å ç´ ï¼å¹¶å°å ¶æ·»å å°é¡µé¢ä¸ã
var xtreehouse = new XTreehouseElement();
document.body.appendChild(xtreehouse);
å¯ä»¥åå ¶ä»çHTMLå ç´ ä¸æ ·ä½¿ç¨åé¢å®ä¹å¥½çæ¹æ³åå±æ§ã
xtreehouse.hello();
var badges = xtreehouse.badges;
æ©å±ç°æçå ç´
æ£å¦å建çèªå®ä¹å ç´ ï¼è¿å¯ä»¥ä½¿ç¨ registerElement() æ¹æ³æ¥æ©å±ç°æçHTMLå ç´ çåè½ãæ¯å¦æ们å¯ä»¥æ©å± <img> å ç´ æ¥å建ä¸ä¸ªå¸¦åéç缩ç¥å¾æ¾ç¤ºã
åä¹åé£æ ·å å建ä¸ä¸ªå¯¹è±¡ååãä¸è¿è¿æ¬¡ï¼æ¯ä»ç°æçHTMLå ç´ ä¸æ¥æ©å±å¯¹è±¡ååãå¨è¿ä¸ªç¤ºä¾ä¸ï¼æ©å±çæ¯ HTMLImageElement ã
var ThumbImageProto = Object.create(HTMLImageElement.prototype);
æ¥ä¸æ¥ä½¿ç¨ createCallback å®ä¹ä¸ä¸ªå½æ°ï¼åè°å½æ°ï¼ï¼å¨å建å ç´ æ¶å°±å®ä¹äºå¾åç width å height ã
ThumbImageProto.createdCallback = function() {
this.width = '100';
this.height = '100';
};
è¿å¯ä»¥èªå®ä¹èªå·±çå±æ§åæ¹æ³ï¼
ThumbImageProto.changeImage = function() {
this.src = 'new-image.jpg';
};
å½ä½ æ³æ©å±å ç´ æ¶ï¼å¨ document.registerElement() å建å ç´ æ¶ï¼å¯ä»¥éè¿ç»å¯¹è±¡æ·»å extends å±æ§ãè¿ä¸ªå±æ§çå±æ§å¼å°±æ¯ä½ éè¦æ©å±çå ç´ å称ã
var ThumbImage = document.registerElement('thumb-img', {
prototype: ThumbImageProto,
extends: 'img'
});
è¦ä½¿ç¨èªå®ä¹å ç´ ï¼å¯ä»¥ç»å ç´ æå®ä¸ä¸ªå±æ§æ¥æ©å±å ç´ ãè¿ä¸ªå±æ§çå¼æ¯èªå®ä¹çå ç´ å称ï¼å¯ä»¥åè¯æµè§å¨ <img> 使ç¨äºèªå®ä¹çAPIï¼ thumb-img ã
<img is="thumb-img">
èªå®ä¹å ç´ åè°æ¹æ³
å建å管çèªå®ä¹å ç´ æ¶æå¾å¤åè°æ¹æ³å¯ä½¿ç¨ï¼
createdCallback : å ç´ å建åè°ç¨
attachedCallback : å ç´ éå å°ææ¡£åè°ç¨
detachedCallback : ä»ææ¡£ä¸ç§»é¤å ç´ åè°ç¨
attributeChangedCallback(attrName, oldValue, newValue) : å ç´ ä»»ä¸å±æ§åæ´åè°ç¨
æå®è¿äºåè°å½æ°çåå对象ï¼å¹¶ä¼ éç» document.registerElement() ã
var XTreehouseProto = Object.create(HTMLElement.prototype);
XTreehouseProto.createdCallback = function() {}
XTreehouseProto.attachedCallback = function() {}
XTreehouseProto.detachedCallback = function() {}
XTreehouseProto.attributeChangedCallback = function(attrName, oldValue, newValue) {}
var XTreehouse = document.registerElement('x-treehouse', { prototype: XTreehouseProto });
使ç¨Shadow DOMå建èªå®ä¹å ç´
èªå®ä¹å ç´ çæ£çå¨åå°±æ¯å¦ä½å Shadow DOM ä¸èµ·ä½¿ç¨ã使å¾å®å¾å®¹æå建å¯éç¨çç»ä»¶ã
å¨æ¥ä¸æ¥çå 容ä¸å°ççå¦ä½ä½¿ç¨Shadow DOMèªå®å ç´ ï¼æ¥å建ä¸ä¸ªç½ä¸ååºå¯å±ç¤ºçååãè¿éçæ³æ³æ¯ï¼Webå¼å人åå¯éè¿æ·»å ä¸è¡HTMLæ ç¾æ¥è½»æ¾çå建产åãéè¦æ¾ç¤ºç产å£ææä¿¡æ¯é½éè¿èªå®ä¹ç data- å±æ§æ¥å®æã
<x-product data-name="Product Name" data-img="image.png" data-url="http://example.com"></x-product>
é¦å åºäº HTMLElement.prototype å建ä¸ä¸ªæ°çåå对象ã
// Create a new object based of the HTMLElement prototype
var XProductProto = Object.create(HTMLElement.prototype);
æ¥ä¸æ¥ï¼æ们éè¦è®¾ç½®ä¸ä¸ª createdCallback å½æ°ãæ们å°è¦å建ä¸ä¸ª <img> å<a> å ç´ ï¼ç¨æ¥æ¾ç¤ºäº§åãå æ代ç å±ç¤ºä¸ä¸ï¼å详ç»ä»ç»ï¼
// Set up the element.
XProductProto.createdCallback = function() {
// Create a Shadow Root
var shadow = this.createShadowRoot();
// Create an img element and set it's attributes.
var img = document.createElement('img');
img.alt = this.getAttribute('data-name');
img.src = this.getAttribute('data-img');
img.width = '150';
img.height = '150';
img.className = 'product-img';
// Add the image to the Shadow Root.
shadow.appendChild(img);
// Add an event listener to the image.
img.addEventListener('click', function(e) {
window.location = this.getAttribute('data-url');
});
// Create a link to the product.
var link = document.createElement('a');
link.innerText = this.getAttribute('data-name');
link.href = this.getAttribute('data-url');
link.className = 'product-name';
// Add the link to the Shadow Root.
shadow.appendChild(link);
};
é¦å å建ä¸ä¸ªæ°çShadow DOMãå¦æä½ å¯¹Shadow DOMä¸çæï¼å¯ä»¥å é 读ä¹åçæç« ãç¶åå建ä¸ä¸ª <img> å ç´ ï¼å¹¶è®¾ç½®å ¶ alt ã src ã width å height å±æ§æå® x-product å ç´ çä¸äºä¿¡æ¯ã
注ï¼åè°å½æ°ï¼ this æçæ¯èªå®ä¹å ç´ çæ è®°ã
æ¥ä¸æ¥å° <img> å <a> å ç´ æ·»å å°Shadow rootä¸é¢ã并设置å ç´ çå±æ§å¼ä»èªå®ä¹å ç´ ç data- å±æ§è·åã
ç°å¨æ们éè¦æ³¨åèªå®ä¹å ç´ ï¼å¹¶ä¸å° x-product å ç´ ä¼ ç» document.registerElement() ï¼åæ¶æå®å¯¹è±¡åå为 XProductProto :
// Register the new element.
var XProduct = document.registerElement('x-product', {
prototype: XProductProto
});
为äºè®©é¡¹ç®å±ç¤ºæ´å¥½ï¼éè¦æ·»å ä¸äºCSS代ç ï¼
x-product {
display: inline-block;
float: left;
margin: 0.5em;
border-radius: 3px;
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
font-family: Helvetica, arial, sans-serif;
-webkit-font-smoothing: antialiased;
}
x-product::shadow .product-img {
cursor: pointer;
background: #FFF;
margin: 0.5em;
}
x-product::shadow .product-name {
display: block;
text-align: center;
text-decoration: none;
color: #08C;
border-top: 1px solid #EEE;
font-weight: bold;
padding: 0.75em 0;
}
为äºæ¾ç¤ºäº§åï¼æ们éè¦å° <x-product> å ç´ æ·»å å°HTML模æ¿ä¸ãä½¿ç¨ data-name ï¼ data-img å data-url å±æ§æå®äº§åç¸å ³æ°æ®ãå½é¡µé¢å è½½æ¶ï¼èªå®ä¹å ç´ å°±ä¼éè¿ createCallback æ¥è°ç¨å®ä»¬ã
<x-product data-name="Ruby" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/ruby.png" data-url="http://example.com/1"></x-product>
<x-product data-name="JavaScript" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/javascript.png" data-url="http://example.com/2"></x-product>
<x-product data-name="Python" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/python.png" data-url="http://example.com/3"></x-product>
å°±æ¯è¿æ ·ï¼ä½ ç°å¨å·²ç»ä½¿ç¨Shadow DOMèªå®ä¹äºä¸ä¸ªå ç´ ï¼æ¾ç¤ºä¸ç³»åç产åã
æµè§å¨æ¯æèªå®ä¹HTMLå ç´
Chrome 33+åOperaæ¯æèªå®ä¹å ç´ ãç¶èæä¸ä¸ªå¼ºå¤§ç polyfill å¯ä»¥è®©å ¶ä»çæµè§å¨ï¼æ¯å¦è¯´ Polymer å X-tags ã
å¯ä»¥ä½¿ç¨ registerElement() æ¹æ³æ£æµ document 对象æ¯å¦è¢«æµè§å¨æ¯æï¼
if ('registerElement' in document) {
// Supported.
} else {
// Not supported.
}
温馨提示:答案为网友推荐,仅供参考