以下全部转自：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. rem自适应js代码
			
    以后懒得写,直接复制了 var computedFz = (function(){ var designWidth = 375, rem2px = 100; function computedFz() ...
    
			
    2. 
						
  2. 前端为什么要对url进行编码
			
    为什么要对url进行编码 url有规范,在参数值中出现&字符会截断参数 url中文的问题,编码客转换为英文 也是第一种情况,url中有个参数值是url,传输的时候会出现错误 例1 有这样一串参 ...
    
			
    3. 
						
  3. C11简洁之道：函数绑定
			
    1.  可调用对象 在C++中,有“可调用对象”这么个概念,那么什么是调用对象呢?有哪些情况?我们来看看: 函数指针: 具有operator()成员函数的类对象(仿函数): 可以被转换为函数指针的类对 ...
    
			
    4. 
						
  4. 解决nginx在记录post数据时 中文字符转成16进制的问题【转载】
			
    1. 问题描述 nginx 在获取post数据时候,如果是中文,则转换成16进制显示在日志文件中,如下图所示.   Paste_Image.png 日志格式为: log_format postdata ...
    
			
    5. 
						
  5. JAVA list 列表 字典 dict
			
    import java.util.ArrayList; import java.util.HashMap; import java.util.Map; import java.util.Set; pu ...
    
			
    6. 
						
  6. canvas利用formdata上传到服务器
			
    1.首先绘制canvas图片 <canvas id="myCanvas" width="100" height="100" style ...
    
			
    7. 
						
  7. Python eval 函数说明
			
    eval(str [,globals [,locals ]]) -- 函数将字符串str当成有效Python表达式来求值,并返回计算结果. 例 :  eval('3+4')         ==> ...
    
			
    8. 
						
  8. Python代码这样写更优雅（转）
			
    1.变量交换 大部分编程语言中交换两个变量的值时,不得不引入一个临时变量: >>> a = 1>>> b = 2>>> tmp = a>&g ...
    
			
    9. 
						
  9. Linux汇编教程02：编写第一个汇编程序
			
    学习一门语言,最好的方式就是在运用中学习,那么在这一章节中,我们开始编写我们的第一个汇编程序.当然作为第一个程序,其实十分的简单,但可以给大家一个基本的轮廓,了解汇编大概是这样的. 我们这个程序实际上 ...
    
			
    10. 
						
  10. python基础===codecs打开文件，解决文件编码格式的问题
			
    codecs https://docs.python.org/3/library/codecs.html 我们经常用open打开文件的时候会出现各式各样的错误,编码格式的问题,等等~真的很烦 现在尽量 ...
    
			
    11.