以下全部转自：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. Java的四种引用?用到的场景？
			
    在JDK 1.2以前的版本中,若一个对象不被任何变量引用,那么程序就无法再使用这个对象.也就是说,只有对象处于可触及(reachable)状态,程序才能使用它.从JDK 1.2版本开始,把对象的引用分 ...
    
			
    2. 
						
  2. was（websphere application server）中用apache的httpclient时jar包冲突问题的解决
			
    这个问题可以用was的共享库解决. 具体解决方案如下图所示: 对于有多个jar包冲突时,为每个冲突的jar包都新建一个共享库即可. 我之前的错误操作是以为一个共享库可以添加多个冲突的jar包用分号和逗 ...
    
			
    3. 
						
  3. sgu 131 状压DP
			
    棋盘覆盖(二) 时间限制:1000 ms  |  内存限制:65535 KB     描述 The banquet hall of Computer Scientists' Palace has a  ...
    
			
    4. 
						
  4. 使用Android Studio调试UiAutomator过程中遇到的问题
			
    声明: 这里纪录了个人学习和使用Android Studio调试UiAutomator过程中遇到遇到的问题,不定时进行更新,欢迎一起交流学习 1.Excution faild for task ‘:a ...
    
			
    5. 
						
  5. zookeeper源码分析之leader选举
			
    zookeeper提供顺序一致性.原子性.统一视图.可靠性保证服务zookeeper使用的是zab(atomic broadcast protocol)协议而非paxos协议zookeeper能处理并 ...
    
			
    6. 
						
  6. C语言预处理
			
    1.由源码到可执行程序的过程(1)源码.c->(编译)->elf可执行程序(2)源码.c->(编译)->目标文件.o->(链接)->elf可执行程序(3)源码.c- ...
    
			
    7. 
						
  7. 安卓弹出键盘隐藏fixed定位相关的元素(obj必须是class)
			
    //安卓弹出键盘隐藏fixed定位相关的元素(obj必须是class) function displayFixed(obj){ var h = document.body.scrollHeight;  ...
    
			
    8. 
						
  8. ZooKeeper入门(四)
			
    入门:使用ZooKeeper的协调分布式应用 这个文档使你对ZooKeeper快速入门,它主要针对想尝试它的开发者.并且包含简单的单机的ZooKeeper服务的安装说明,一些验证是否运行的命令,和一个 ...
    
			
    9. 
						
  9. 为select2下拉框赋值
			
    $("#A").select2("val", value);$("#A").val('3232');
    
			
    10. 
						
  10. c# delegate知识
			
    一.引用方法 委托是寻址方法的.NET版本.委托是类型安全的类,它定义了返回类型和参数的类型.委托是对方法的引用,也可以对多个方法进行引用,委托可以理解为指向方法地址的指针. 如:delegate i ...
    
			
    11.