webcomponents可以删除吗_电子市场可以删除吗_stormmedia可以删除吗(2)

自定义元素的原型有一些属性，用来指定回调函数，在特定事故出现时触发。

下面是一个例子。

var proto = Object.create(HTMLElement.prototype);
proto.createdCallback = function() {
  console.log('created');
  this.innerHTML = 'This is a my-demo element!';
};
proto.attachedCallback = function() {
  console.log('attached');
};
var XFoo = document.registerElement('x-foo', {prototype: proto});

利用回调函数，可以便于地在自定义元素中插入HTML语句。

var XFooProto = Object.create(HTMLElement.prototype);
XFooProto.createdCallback = function() {
  this.innerHTML = "<b>I'm an x-foo-with-markup!</b>";
};
var XFoo = document.registerElement('x-foo-with-markup',
  {prototype: XFooProto});

上面代码定义了createdCallback回调函数，生成例子时，该变量运行，插入如下的HTML语句。

<x-foo-with-markup>
   <b>I'm an x-foo-with-markup!</b>
</x-foo-with-markup>

所谓Shadow DOM指的是，浏览器将模版、样式表、属性、JavaScript代码等，封装成一个独立的DOM元素。外部的设定难以制约到其外部，而内部的设定也不会影响到内部，与浏览器处理原生网页元素（比如<video>元素）的方法很像。Shadow DOM最大的好处有两个，一是可以向客户隐藏细节，直接提供模块，二是可以封装外部样式表webcomponents可以删除吗，不会影响到内部。Chrome 35+支持Shadow DOM。

Shadow DOM元素需要依存在一个现有的DOM元素之下，通过createShadowRoot方法创造，然后将其插入该元素。

var shadowRoot = element.createShadowRoot();
document.body.appendChild(shadowRoot);

上面代码创造了一个shadowRoot元素，然后将其插入HTML文档。

下面的举例是选定网页中某个现存的元素，作为Shadow DOM的根元素。

<button>Hello, world!</button>
<script>
  var host = document.querySelector('button');
  var root = host.createShadowRoot();
  root.textContent = '你好';
</script>

上面代码指定现存的button元素，为Shadow DOM的根元素，并将button的文字从英文改为中文。

通过innerHTML属性，可以为Shadow DOM指定内容。

var shadow = document.querySelector('#hostElement').createShadowRoot();
shadow.innerHTML = '<p>Here is some new text</p>';
shadow.innerHTML += '<style>p { color: red };</style>';

下面的举例是为Shadow DOM加上独立的模板。

<div id="nameTag">张三</div>
<template id="nameTagTemplate">
  <style>
    .outer {
      border: 2px solid brown;
    }
  </style>
  <div class="outer">
    <div class="boilerplate">
      Hi! My name is
    </div>
    <div class="name">
      Bob
    </div>
  </div>
</template>

上面代码是一个div元素和模版。接下来，就是要把模版应用到div元素上。

var shadow = document.querySelector('#nameTag').createShadowRoot();
var template = document.querySelector('#nameTagTemplate');
shadow.appendChild(template.content.cloneNode(true));

上面代码先用createShadowRoot方法，对div创造一个根元素，用来指定Shadow DOM，然后把模版元素添加为Shadow的子元素。

长久以来，网页可以读取内部的样式表、脚本、图片、多媒体，却难以方便地读取其它网站，iframe和ajax都没法提供个别的解决方案，且有多大的局限。HTML Import就是为了解决加载外部网页这个难题，而提起来的。

下面代码用于检测当前浏览器是否支持HTML Import。

function supportsImports() {
  return 'import' in document.createElement('link');
}
if (supportsImports()) {
  // 支持
} else {
  // 不支持
}

HTML Import用于将内部的HTML文档读取进当前文档。我们可以将模块的HTML、CSS、JavaScript封装在一个文件里，然后使用以下的代码插入需要使用该模块的网站。

<link rel="import" href="dialog.html">

上面代码在网站中插入一个对话框组件，该创建封装在dialog.html文件。注意，dialog.html文件中的风格和JavaScript脚本，都对所插入的整个网页有效。

假定A网页通过HTML Import加载了B网页，即B是一个组件，那么B网页的样式表和类库，对A网页也有效（准确得说，只有style标签中的风格对A网页有效，link标签读取的样式表对A网页无效）。所以可以把多个样式表和类库，都放在B网页中，都从那里加载。这对小型的框架，是很方便的加载方式。

如果B与A不在同一个域，那么A所在的域应该开启CORS。

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/sanxing/article-120723-2.html