Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

element ready?

  HTML元素本身不支持ready事件,在某个元素部署完整后执行程序通常会在那个元素的后面放一个SCRIPT标签,但这就需要在文档中嵌入大量SCRIPT标签。当然也可以把所有操作丢在DOMContentLoaded中完成,但这个事件很迟触发,有损体验。
  比如一个使用Shadow DOM的场景,我们该何时为DOM创建Shadow Root呢?在DOMContentLoaded时创建吗?那样太慢了,可能带来糟糕的用户体验。在每一个Shadow Host后面都跟上一个SCRIPT来为前面的Shadow Host创建Shadow Root吗?这么做会导致整个文档变得很乱。所以我们需要一个用于监视元素的创建、移除,之类的事件。自定义元素是支持这些的。
<template id="template">
  <style>
    span {
      border:1px solid #CCC;border-radius:5px;
      padding:3px 6px;font-size:12px;background:#F4F4F4;
    }
  </style>
  <span>
    <strong><content select="x-name"></content></strong>:
    <content select="x-content"></content>
  </span>
</template>
<style>
x-test {display:block;height:24px;}
</style>
<script>
var HTMLXDiv=document.registerElement("x-test",{
  prototype:function(){
    var proto=Object.create(HTMLElement.prototype);
    proto.attachedCallback=function(e){
      var root=this.webkitCreateShadowRoot();
      root.appendChild(document.importNode(template.content));
    };
    return proto;
  }()
});
</script>
<x-test>
  <x-name>YanagiEiichi</x-name>
  <x-content>Hello World!</x-content>
</x-test>
<x-test>
  <x-name>次碳酸钴</x-name>
  <x-content>大家好~</x-content>
</x-test>

  在调用registerElement时把attachedCallback函数添加到prototype中就可以在元素被放入文档时触发这个函数。除此之外还有detachedCallbackcreatedCallbackattributeChangedCallback,这些函数可以定义。具体的触发时间就如同他们的名字描述的。
网名:
3.84.186.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^