Web Component
前言
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的更多相关文章
- Web Component 文章
周末无意中了解了Web Component的概念. http://blog.amowu.com/2013/06/web-components.html http://www.v2ex.com/t/69 ...
- 示例可重用的web component方式组织angular应用模块
在online web应用中,经常有这样的需求,能够让用户通过浏览器来输入代码,同时能够根据不同的代码来做语法高亮.大家已知有很多相应的javascript库来实现语法高亮的功能,比如codemirr ...
- Web Component总结
Web Component 一个Web组件通常由四个部分组成:模板.Shadow DOM.自定义元素与打包,其中Shadow DOM解决了组件在页面中的封装问题 Shadow DOM 有shadow ...
- Salesforce知识整理（一）之Lightning Web Component Tools
目录 LWC知识整理(一) 工具 Salesforce CLI Visual Studio Code(VS Code) Developer Hub(Dev Hub) 开启Dev Hub 相关资料 茶余 ...
- Web Component探索
概述 各种网站往往需要一些相同的模块,比如日历.调色板等等,这种模块就被称为“组件”(component).Web Component就是网页组件式开发的技术规范. 采用组件进行网站开发,有很多优点. ...
- angular custom Element 自定义web component
angular 自定义web组件: 首先创建一个名为myCustom的组件. 引入app.module: ... import {customComponent} from ' ./myCustom. ...
- amazeui学习笔记二（进阶开发2）--Web组件简介Web Component
amazeui学习笔记二(进阶开发2)--Web组件简介Web Component 一.总结 1.amaze ui:amaze ui是一个web 组件, 由模板(hbs).样式(LESS).交互(JS ...
- 使用纯粹的JS构建 Web Component
原文链接:https://ayushgp.github.io/htm...译者:阿里云 - 也树 Web Component 出现有一阵子了. Google 费了很大力气去推动它更广泛的应用,但是除 ...
- 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 ...
随机推荐
- vue 中axios 的基本配置和基本概念
axios的基本概念及安装配置方法 ajax:异步请求,是一种无需再重新加载整个网页的情况下,能够更新部分网页的技术 axios:用于浏览器和node.js的基于promise的HTTP客户端 a ...
- LeetCode（95）： 不同的二叉搜索树 II
Medium! 题目描述: 给定一个整数 n,生成所有由 1 ... n 为节点所组成的二叉搜索树. 示例: 输入: 3 输出: [ [1,null,3,2], [3,2,null,1], ...
- 【supervisor】监控服务
写了一个ftp服务,用supervisor监控一下 1.先写一个配置文件,路径和名称为/etc/supervisord.conf.d/ftp-server.ini [program:ftp-serve ...
- sqlmap实例文档
sqlmap 手册参数整理文档 1.--data sqlmap -u "http://www.target.com/vuln.php" --data="id=1" ...
- CF1029E
一个看起来就不对的贪心居然是正解... 但仔细思考一下,这种贪心倒的确找不到反例.. 贪心思想:每次找出离根节点最远的点,然后由根节点向这个点的父节点连边,一直连到所有点都能被覆盖即可,这样构造出的一 ...
- shell设置连接服务器永不超时
1.打开/etc/ssh/sshd_config vim /etc/ssh/sshd_config 2.设置如下内容: MaxAuthTries 60 MaxSessions 3 ClientAl ...
- Windows Internals 笔记——错误处理
1.Windows函数检测到错误时,会使用一种名为“线程本地存储区”的机制将相应的错误代码与“主调线程”关联到一起.这种机制使得不同的线程能独立运行,不会出现相互干扰对方的错误代码的情况. 2.Get ...
- 插件使用一颜色选择器---cxColor
cxColor 是一款颜色选择器.这样的插件使用场景不多.可喜的这是国人写的. 官方网站: https://github.com/ciaoca/cxColor 使用方法: 1.引入jquery库 1 ...
- 激活函数的比较，sigmoid，tanh，relu
1. 什么是激活函数 如下图,在神经元中,输入inputs通过加权.求和后,还被作用了一个函数.这个函数就是激活函数Activation Function 2. 为什么要用激活函数 如果不用激活函数, ...
- Django 基模板布局设置
Django 基模板布局设置 基模板 定义基础模板一般分为三块,css部分,body部分,js部分 将基础统一的部分写在基础模板中 差异部分直接 引用 {% block css %}{% endblo ...