以下全部转自：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. SPOJ - HIGH ：Highways (生成树计数)
			
    Highways 题目链接:https://vjudge.net/problem/SPOJ-HIGH Description: In some countries building highways  ...
    
			
    2. 
						
  2. C. Line （扩展欧几里得）
			
    C. Line time limit per test 1 second memory limit per test 256 megabytes input standard input output ...
    
			
    3. 
						
  3. footer点击添加active class
			
    //footer点击添加active class var indexFooter= document.querySelectorAll('#index_footer li'); for (var i  ...
    
			
    4. 
						
  4. [技巧篇]16.MyEclipse2014安装SVN插件，在线安装
			
    这两天想做点东西,但是现在流行的是git,但是军哥的项目是托管到阿里的svn代码当中,所以没有办法,还需要弄SVN,这里不将什么安装SVN等东西 我要求的就是快速入门而已,仅此而已,我安装成功,过程很 ...
    
			
    5. 
						
  5. 51nod 1873 高精度计算
			
    JAVA BigDecimal import java.util.*; import java.math.*; public class Main { public static void main( ...
    
			
    6. 
						
  6. [洛谷P3763] [TJOI2017]DNA
			
    洛谷题目链接:[TJOI2017]DNA 题目描述 加里敦大学的生物研究所,发现了决定人喜不喜欢吃藕的基因序列S,有这个序列的碱基序列就会表现出喜欢吃藕的性状,但是研究人员发现对碱基序列S,任意修改其 ...
    
			
    7. 
						
  7. Cppcheck代码分析上
			
    1.检查点 1.自动变量检查: 返回自动变量(局部变量)指针: 2.越界检查:数组越界返回自动变量(局部变量)指针: 3.类检查:构造函数初始化: 4.内存泄露检查:  5.空指针检查: 6.废弃函数 ...
    
			
    8. 
						
  8. web开发中防止SQL注入
			
    一.SQL注入简介 SQL注入是比较常见的网络攻击方式之一,它不是利用操作系统的BUG来实现攻击,而是针对程序员编写时的疏忽,通过SQL语句,实现无账号登录,甚至篡改数据库. 二.SQL注入攻击的总体 ...
    
			
    9. 
						
  9. UIDatePicker---iOS-Apple苹果官方文档翻译
			
    本系列所有开发文档翻译链接地址: iOS7开发-Apple苹果iPhone开发Xcode官方文档翻译PDF下载地址  UIDatePicker //转载请注明出处--本文永久链接:http://www ...
    
			
    10. 
						
  10. Spring boot 集成Dubbox（山东数漫江湖）
			
    前言 因为工作原因,需要在项目中集成dubbo,所以去查询dubbo相关文档,发现dubbo目前已经不更新了,所以把目光投向了dubbox,dubbox是当当网基于dubbo二次开发的一个项目,dub ...
    
			
    11.