前言

Web Component不是新东西，几年前的技术，但是受限于浏览器兼容性，一直没有大规模应用在项目里，直到现在（2018年年末），除IE仍不支持之外，其它主流浏览器都支持Web Component。

Web Component不是一个东西，它分为四部分，分别是

template——模板
HTML import——HTML导入
Shadow DOM——影子DOM
Custom Elements——自定义元素

template

前端模板也不是个新概念，templatejs、ejs等模板引擎早就将模板的概念深入人心，在纯HTML世界里，我们通常把模板写在script标签里，将type改为text/html，避免浏览器解析，像这样

<script type="text/html">

	<div>

		<title>标题</title>

		<content>内容</content>

	</div>

</script>

template则是用标签包裹模板内容，不同之处在于获取模板内容的方式，script模板是通过获取script的innerHTML来获取，template则是获取读取template节点的content属性来获取

// 模板文件

<template>

	<div>

		<title>标题</title>

		<content>内容</content>

	</div>

</template>


// 获取模板内容

console.log(document.querySelector('template').content);

HTML import

在此之前，HTML导入一般用iframe嵌套或依赖后端又或是其他库，HTML import为原生HTML提供了导入HTML文件的功能，使用link标签，rel设置为import，href为被导入文件路径

<link rel="import" href="header.html">

HTML导入之后不会立即被浏览器解析并渲染，需要手动插入到DOM节点，这点跟css不同

// header.html

<h2 id="header">这是公共header</h2>

<h2 id="footer">这是公共footer</h2>

// index.html

<html>

	<head>

		<link rel="import" href="header.html">

	</head>

	<body>

		<content>内容区</content>

		<script type="text/javascript">

			let importDom = document.querySelector('link[href="header.html"]').import;

			let content = document.querySelector('content');

			let header = importDom.querySelector('#header');

			let footer = importDom.querySelector('#footer');

			document.body.insertBefore(header, content);

			document.body.appendChild(footer);

		</script>

	</body>

</html>

最终渲染结果

这是公共header

内容区

这是公共footer

Web Component的更多相关文章

  1. Web Component 文章

    周末无意中了解了Web Component的概念. http://blog.amowu.com/2013/06/web-components.html http://www.v2ex.com/t/69 ...

  2. 示例可重用的web component方式组织angular应用模块

    在online web应用中,经常有这样的需求,能够让用户通过浏览器来输入代码,同时能够根据不同的代码来做语法高亮.大家已知有很多相应的javascript库来实现语法高亮的功能,比如codemirr ...

  3. Web Component总结

    Web Component 一个Web组件通常由四个部分组成:模板.Shadow DOM.自定义元素与打包,其中Shadow DOM解决了组件在页面中的封装问题 Shadow DOM 有shadow ...

  4. Salesforce知识整理（一）之Lightning Web Component Tools

    目录 LWC知识整理(一) 工具 Salesforce CLI Visual Studio Code(VS Code) Developer Hub(Dev Hub) 开启Dev Hub 相关资料 茶余 ...

  5. Web Component探索

    概述 各种网站往往需要一些相同的模块,比如日历.调色板等等,这种模块就被称为“组件”(component).Web Component就是网页组件式开发的技术规范. 采用组件进行网站开发,有很多优点. ...

  6. angular custom Element 自定义web component

    angular 自定义web组件: 首先创建一个名为myCustom的组件. 引入app.module: ... import {customComponent} from ' ./myCustom. ...

  7. amazeui学习笔记二（进阶开发2）--Web组件简介Web Component

    amazeui学习笔记二(进阶开发2)--Web组件简介Web Component 一.总结 1.amaze ui:amaze ui是一个web 组件, 由模板(hbs).样式(LESS).交互(JS ...

  8. 使用纯粹的JS构建 Web Component

    原文链接:https://ayushgp.github.io/htm...译者:阿里云 - 也树 Web Component 出现有一阵子了. Google 费了很大力气去推动它更广泛的应用,但是除 ...

  9. how to create one single-file Web Component just using the HTML, CSS, JavaScript

    how to create one single-file Web Component just using the HTML, CSS, JavaScript web components html ...

随机推荐

  1. Confluence 6 整合到支持的附件存储选项

    如果你现在正在存储附件到 WebDav 或者你的数据库中.你可以整合附件的存储到文件系统中.当你的附件从数据库中被合并到文件系统后,你存储在数据库中的附件数据就可以从数据库中删除了. 当附件合并进行的 ...

  2. follow

    public function follow(Request $request, FeedModel $model, FeedRepository $repository) { if (is_null ...

  3. kali linux revealed mastering the penetration testing distribution

    1.本博客记载的是这本书的学习笔记,还有出现的一些不懂的单词 我也将会记载这篇博客中.记载顺序是按照本书的章节顺序来记载的.最喜欢本书中的一句   you havae no idea how good ...

  4. 20165314 2016-2017-2 《Java程序设计》第8周学习总结

    20165314 2016-2017-2 <Java程序设计>第8周学习总结 教材学习内容总结 java中的线程 线程的常用方法 GUI线程 多线程的概念 代码托管

  5. 沈阳润才教育CRM

    一.CRM初始 CRM,客户关系管理系统(Customer Relationship Management).企业用CRM技术来管理与客户之间的关系,以求提升企业成功的管理方式,其目的是协助企业管理销 ...

  6. VOC数据集生成代码使用说明

    #split.py 文件 输入格式为images ,和标签txt文件,txt中的数据为坐标值共8个. import os import numpy as np import math import c ...

  7. 步步為營-96-MyMVC2

    說明:地址欄中的URL還存在一些不足之處 地址欄中最好能是http"www.sss.com/asdf/aaa 1.1 模擬路由的原理:創建Routing文件夾,并添加URLRoutingMo ...

  8. 支持向量机-SMO算法简化版

    SMO:序列最小优化 SMO算法:将大优化问题分解为多个小优化问题来求解 SMO算法的目标是求出一系列的alpha和b,一旦求出这些alpha,就很容易计算出权重向量w,并得到分隔超平面 工作原理:每 ...

  9. 史上最简单的 SpringCloud 教程 | 第一篇： 服务的注册与发现（Eureka）

    一.spring cloud简介 spring cloud 为开发人员提供了快速构建分布式系统的一些工具,包括配置管理.服务发现.断路器.路由.微代理.事件总线.全局锁.决策竞选.分布式会话等等.它运 ...

  10. 华硕X75VB安装ubuntu12.10网卡不可用等相关问题总结

    笔记本相关信息: 电脑型号:华硕X75VB 笔记本电脑 处理器:i5-3230M 2.60GHz 双核 主板:华硕X75VB (英特尔 Ivy Bridge - HM76 Express芯片组) 内存 ...