前端应该知道的Web Components
Posted jianxian
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端应该知道的Web Components相关的知识，希望对你有一定的参考价值。
前端组件化的痛点
在前端组件化横行的今天，确实极大的提升了开发效率。不过有一个问题不得不被重视，拟引入的这些html、css、js代码有可能对你的其他代码造成影响。
虽然我们可以通过命名空间、闭包等一系列措施来加以防备，不过还是存在这些隐患。为了解决这些问题，有一个基本大家遗忘的技术还是可以了解一下的，
那就是Web Components。
Web Components 是什么
Web Components是一个浏览器的新功能，提供了一个面向web包括下面几个方面标准的组件模型。
你可以认为Web Components是一个可复用的用户接口部件，
属于浏览器的一部分，所以不需要一些额外的例如jQuery或者Dojo之类的工具库。
一个存在的Web Components的使用完全不需要写代码，
仅仅需要在HTML中加一个import 语句就可以了。
Web Components使用了一些新颖并且在开发中的浏览器功能。
上面提到的部分当前在浏览器中可以正常的运行，但是有好多Web Components可以用来创造的部分没有被提及。
使用Web Components 你几乎可以来做任何可以使用HTML,CSS,JS能做到的事情，并且可以更便捷的被复用。
有时候关于Web Components和谷歌的plymer之间可能会存在一些困惑
简介而论，Polymer是基于Web Components技术的一个框架，你当然可以在不适用其的情况下开发Web Components
Web Components浏览器支持性
Web Components并没有被所有浏览器来实现(截止2017年chrome已经完全支持，其他浏览器还在投票表决中),因此如果在不支持的浏览器上使用Web Components，
应该使用由google polymer开发的 polyfills来达到目的。使用之前最好通过Are We Componentized Yet查看浏览器兼容性。
Web Components 包括以下四种技术(每种都可以被单独使用)
-
Shadow DOM
明确的定义如下：
一种可以在document下组合多个同级别并且可以项目作用的DOM树的方法，因此可以更好完善DOM的构成 -
Custom Elements
定义如下：
一种可以允许开发者在document中定义并使用的新的dom元素类型，即自定义元素 - HTML Templates
模板没什么可说了，在标准实现之前其实我们一直都在用js来实现该方式 -
HTML Imports
一种允许一个html文档在别的htmldocuments中包含和复用的方法
明确的文档定义如下：
- 一种新的html元素: template
- 关于 template 的接口： HTMLTemplateElement, HTMLContentElement (removed from spec) and HTMLShadowElement
- HTMLLinkElement接口和 link 元素的扩展
- 注册custom elements的接口：Document.registerElement()和对Document.createElement() and Document.createElementNS()的更新
- 对html元素原型对象新增的生命周期回调
- 默认为元素对象增加的新的css的伪类：:unresolved
- The Shadow DOM：ShadowRoot and Element.createShadowRoot(), Element.getDestinationInsertionPoints(), Element.shadowRoot
- Event接口的扩展、Event.path
- Document 接口的一些扩展
- Web Components样式应用新的伪类：:host, :host(), :host-context()
如何使用
接下看最直接的还是hello world 。直接上代码： index.html
<!DOCTYPE>
<html>
<head>
<title>webcomponent</title>
<link rel="import" href="./components/helloword.html" />
</head>
<body>
<hellow-world></hellow-world>
</body>
</html> helloworld.html
<template>
<style>
.coloured {
color: red;
}
</style>
<p>the first webcompnent is <strong class="coloured">Hello World</strong></p>
</template>
<script>
(function() {
// Creates an object based in the HTML Element prototype
// 基于HTML Element prototype 创建obj
var element = Object.create(HTMLElement.prototype);
// 获取特mplate的内容
var template = document.currentScript.ownerDocument.querySelector(‘template‘).content;
// element创建完成之后的回调
element.createdCallback = function() {
// 创建 shadow root
var shadowRoot = this.createShadowRoot();
// 向root中加入模板
var clone = document.importNode(template, true);
shadowRoot.appendChild(clone);
};
document.registerElement(‘hellow-world‘, {
prototype: element
});
}());
</script>运行结果
结束语
上面就是关于WebComponents的基本介绍了，更多请移步webcomponent-demo查看。
作为一个目前都没有被浏览器全部支持的技术，当然是不会被大面积推广开来的。不过它的出现还是对组件的问题带来了一定的积极影响，
假以时日，也许会被所有浏览器全面支持，成为我们常用的一种方法。
参考文章：https://github.com/w3c/webcomponents
.
以上是关于前端应该知道的Web Components的主要内容，如果未能解决你的问题，请参考以下文章
#yyds干货盘点# Web Components系列 ——自定义组件的生命周期
markdown Snippets.md是我最常用的HTML，CSS和JavaScript代码片段，用于前端Web开发