以下全部转自：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. FileProvider记录下
			
    Mark下FileProvider,阿里巴巴Android开发手册有如下要求:[强制]应用间共享文件时,不要通过放宽文件系统权限的方式去实现,而应使用FileProvider. 知识点记录:1. An ...
    
			
    2. 
						
  2. HDU1384 差分约束
			
    Intervals Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total  ...
    
			
    3. 
						
  3. 关于我之前写的修改Windows系统Dos下显示的用户名之再修改测试
			
    最近看到蛮多网友反映,自己修改Dos下用户名后出现了很多的问题--今天抽了时间,再次修改测试... ================= 提前说明:我自己修改了很多次没发现任何问题,<为避免修改可 ...
    
			
    4. 
						
  4. python基础--结构篇
			
    在C/C++/Java中,main是程序执行的起点,Python中,也有类似的运行机制,但方式却截然不同: Python使用缩进对齐组织代码的执行,所有没有缩进的代码(非函数定义和类定义),都会在载入 ...
    
			
    5. 
						
  5. 2015/9/5 Python基础(9)：条件和循环
			
    条件语句Python中的if语句如下: if expression: expr_true_suite 其中expression可以用布尔操作符and, or 和 not实现多重判断条件.如果一个复合语 ...
    
			
    6. 
						
  6. 利用forEach循环Dom元素…
			
    大家都知道forEach是循环数组用的,而且很方便,可以丢掉for循环了,但是它不能循环Dom元素.其实我们可以利用call来完成forEach循环Dom; 假设有这样的HTML结构: <ul  ...
    
			
    7. 
						
  7. Tomcat启动报错:org.apache.catalina.LifecycleException: Failed to start component [StandardEngine[Catalin
			
    Error starting ApplicationContext. To display the auto-configuration report re-run your application  ...
    
			
    8. 
						
  8. 【poj1901-求区间第k大值（带修改）】树状数组套主席树
			
    901: Zju2112 Dynamic Rankings Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 7025  Solved: 2925[Sub ...
    
			
    9. 
						
  9. JAVA Frame 响应窗口关闭事件
			
    /* * To change this license header, choose License Headers in Project Properties. * To change this t ...
    
			
    10. 
						
  10. 控制 Cookie 的作用范围
			
    默认时,网站的所有 Cookies 都一起被存储在客户端,并且所有 Cookies 连同网站的任何请求一起被发送到服务器.换句话说,网站中的每个页面都能够为网站获取所有的 Cookies.但是,你能够 ...
    
			
    11.