以下全部转自：http://www.cnblogs.com/pqjwyn/p/7401918.html

前端组件化的痛点
在前端组件化横行的今天，确实极大的提升了开发效率。不过有一个问题不得不被重视，拟引入的这些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>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="import" href="./helloword.html">

</head>

<body>

<hellow-world></hellow-world>

</body>

</html>

　　讲真，这和vue一毛一样。

helloword.html
<template>

    <style>

        .text-red{color:red}

    </style>

    <p class="text-red">你好我的世界！</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>

　　我这里有个错误，world!=word

亲测在谷歌内核的浏览器中都可以跑起来，ie不行。。。

												


											
前端组件化-Web Components【转】的更多相关文章
	

    
								
  1. Vue.js：轻量高效的前端组件化方案
		
    转发一篇尤老师对vue.js的介绍,了解vue.js的来龙去脉.不过现在已经是2.0了,也有添加一些新的东西,当然有些东西也改了. Vue.js:轻量高效的前端组件化方案 Vue.js 是我在2014 ...
    
		
    2. 
						
  2. 【转】Vue.js：轻量高效的前端组件化方案
		
    摘要:Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.在前端纷繁复杂的生态中,Vue.js有幸受到一定程度的关注,目前在GitHub上已经有5000+的star.本文将从各方面对Vue ...
    
		
    3. 
						
  3. 从DOM操作看Vue&React的前端组件化，顺带补齐React的demo
		
    前言 接上文:谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo 上次写完博客后,有朋友反应第一内容有点深,看着迷迷糊糊:第二是感觉没什么使用场景,太过业务化,还不如直接写Vue ...
    
		
    4. 
						
  4. 谈谈我对前端组件化中“组件”的理解，顺带写个Vue与React的demo
		
    前言 前端已经过了单兵作战的时代了,现在一个稍微复杂一点的项目都需要几个人协同开发,一个战略级别的APP的话分工会更细,比如携程: 携程app = 机票频道 + 酒店频道 + 旅游频道 + ..... ...
    
		
    5. 
						
  5. AppBoxFuture(六): 前端组件化开发
		
      前面几篇都是在介绍结构化与非结构化的数据存储,本篇换换口味介绍一下框架是如何实现前端组件化开发的.首先得感谢Vue.ElementUI等优秀的前端开源项目,这些项目帮助作者快速实现了框架的两个前端 ...
    
		
    6. 
						
  6. 如何通过 Vue＋Webpack 来做通用的前端组件化架构设计
		
    目录:   1. 架构选型     2. 架构目录介绍     3. 架构说明     4. 招聘消息 目前如果要说比较流行的前端架构哪家强,屈指可数:reactjs.angularjs.emberj ...
    
		
    7. 
						
  7. 前端组件化Polymer入门教程(1)——初识&&安装
		
    前端组件化Polymer入门教程目录: 前端组件化Polymer入门教程(1)--初识&&安装 前端组件化Polymer入门教程(2)--快速入门 前端组件化Polymer入门教程(3 ...
    
		
    8. 
						
  8. 前端组件化Polymer深入篇(1)
		
    在前面的几节里面简单的介绍了一下Polymer的基本功能,但还有一些细节的东西并没有讨论,所有打算花点时间把Polymer的一些细节写一下. new和createElement有区别吗? <sc ...
    
		
    9. 
						
  9. Webpack+Vue+ES6 前端组件化开发mobile-multi-page应用实战总结
		
    本文版权归博客园和作者吴双本人共同所有 转载和爬虫请注明原文地址 www.cnblogs.com/tdws 一.写在前面 项目上线有一段时间了,一个基于webpack+vue+ES6的手机端多页面应用 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 工作中常用的Linux命令（不断更新中）
			
    最近工作中用到linux命令,简单总结如下: 1. pwd 查看当前所在的文件路径 2. cd 切换目录 cd .. 切换到上一级目录 3. ls 列出当前文件路径下的所有文件和文件夹 4. ll 是 ...
    
			
    2. 
						
  2. 清除windows系统垃圾文件简易脚本(bat)
			
    @echo off      echo 正在清除系统垃圾文件,请稍等......      del /f /s /q %systemdrive%\*.tmp      del /f /s /q %sy ...
    
			
    3. 
						
  3. [技巧篇]16.MyEclipse2014安装SVN插件，在线安装
			
    这两天想做点东西,但是现在流行的是git,但是军哥的项目是托管到阿里的svn代码当中,所以没有办法,还需要弄SVN,这里不将什么安装SVN等东西 我要求的就是快速入门而已,仅此而已,我安装成功,过程很 ...
    
			
    4. 
						
  4. [LeetCode] 14. Longest Common Prefix ☆
			
    Write a function to find the longest common prefix string amongst an array of strings. 解法: 广度优先搜索:先比 ...
    
			
    5. 
						
  5. Linux 使用代理使网速变快
			
    $ export http_proxy="http://USER:PASSWORD@PROXY_SERVER:PORT" $ export https_proxy="ht ...
    
			
    6. 
						
  6. HDFS fs 基本命令
			
    https://hadoop.apache.org/docs/r2.7.1/hadoop-project-dist/hadoop-common/FileSystemShell.html#Overvie ...
    
			
    7. 
						
  7. 【51NOD】数据流中的算法
			
    [算法]数学 [题解] 1.平均数:累加前缀和.//听说要向下取整? 2.中位数:双堆法,大于中位数存入小顶堆,小于中位数存入大顶堆,保证小顶堆内数字数量≥大顶堆,奇数则取小堆顶,偶数则取两堆顶/2. ...
    
			
    8. 
						
  8. Fire! （双bfs+预处理）
			
    题目链接:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem ...
    
			
    9. 
						
  9. 大聊Python----多线程
			
    Python里的多线程是假的多线程,不管有多少核,同一时间只能在一个核中进行操作!利用Python的多线程,只是利用CPU上下文切换的优势,看上去像是并发,其实只是个单线程,所以说他是假的单线程. 那 ...
    
			
    10. 
						
  10. js 基本类型&引用类型
			
    1.基本的数据类型有:undefined,boolean,number,string,null.基本类型的访问是按值访问的,就是说你可以操作保存在变量中的实际的值 基本类型的比较是值的比较.用==比较 ...
    
			
    11.