前言

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. 整合 JIRA 和 Confluence 6

    Jira 应用和 Confluence 可以完全的整合在一起.在 Confluence 中收集你项目组成员的想法,知识和计划.在 Jira 中跟踪你的系统出现的问题,让这 2 个应用同时工作. 了解更 ...

  2. Rational Rose 2007下载、安装和破解

    一.文件下载 (1)DAEMON Tools Lite(虚拟光驱)下载地址 链接:https://pan.baidu.com/s/19L1FT6T1MlyhkfXyobd26A 提取码:drfs (2 ...

  3. linux 基础知识（三）

    抽空把Linux的一些基础的东西再补充一下,安全的东西真的很多都是要自己不断的学习,很多还是今天学习了一点时间过后不用就会忘记.所以学习的东西就是要不断地往复. 有时候感觉有时候快就是慢,慢就是快. ...

  4. tensorflow(3):神经网络优化(ema,regularization)

    1.指数滑动平均 (ema) 描述滑动平均: with tf.control_dependencies([train_step,ema_op]) 将计算滑动平均与 训练过程绑在一起运行 train_o ...

  5. Linux文件系统及文件类型

    Linux文件系统: 根文件系统(rootfs) root filesystem LSB, FHS: (FileSystem... /etc,  /usr,  /var,  /root.... /bo ...

  6. 步步為營-95-MyMVC 1.0

    說明:通過自己編寫MyMVC以便於對MVC內容實現機制有更深刻的認識 1.1:創建MyMVC項目,刪除無關引用,只保留system 和 system.web.同時該項目中以後添加一些文件后也要刪除無關 ...

  7. Parameter 'name' not found. Available parameters are [arg1, arg0, param1, param2]

    解决方法: <select id="selectIf" resultType="student"> SELECT id,name,age,score ...

  8. Stuck on "Authenticating with iTunes Store"

    https://forums.developer.apple.com/thread/76803 Try this, it fixed it for me. Open Terminal and run: ...

  9. windows10的文件浏览器中无法搜索文件内容

    系统:更新到最新的win10(2018年8月23日 23:54:31) 重现步骤:git clone一个项目,然后切换到它的另一个分支:打开文件夹浏览器(explorer),在右上角里输入想要查找的字 ...

  10. cPanel中添加设置附加域(Addon domain)

    本文介绍cPanel设置附加域(addon domain)来实现一个空间做多个网站的方法. 附加域(addon domain) 作用:通过它可以实现添加 新的顶级域名绑定到主机,从而创建新的站点.例如 ...