[HTML5] Build Flexible HTML with HTMLTemplates using Slots and Web Components
HTMLTemplates are part of the web components specification. In this lesson we will learn what are HTML templates, how to use them and how to use the powerful HTMLTemplates slots inside a web component.
<script>
const templateString = `
<div>Some text</div>
<form>
<input name="test"/>
</form>
<slot name="slot1"></slot>
`;
const template = document.createElement('template');
template.innerHTML = templateString;
class MyWebComponent extends HTMLElement {
constructor() {
super();
} connectedCallback() {
this.appendChild(template.content.cloneNode(true));
}
}
window.customElements.define('custom-element', MyWebComponent);
</script>
<custom-element>
<p slot="slot1">This is a slotted paragraph</p>
</custom-element>
<custom-element>
<iframe slot="slot1" width="560" height="315" src="https://www.youtube.com/embed/Bv_5Zv5c-Ts" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</custom-element>
[HTML5] Build Flexible HTML with HTMLTemplates using Slots and Web Components的更多相关文章
- (转)HTML5开发学习(3):本地存储之Web Sql Database
原文:http://www.cnblogs.com/xumingxiang/archive/2012/03/25/2416386.html HTML5开发学习(3):本地存储之Web Sql Data ...
- HTML5和CSS3不仅仅是两项新的Web技术标准
HTML5和CSS3不仅仅是两项新的Web技术标准 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已 ...
- 基于 HTML5 WebGL 的计量站三维可视化监控系统 Web 组态工控应用
得益于 HTML5 WebGL 技术的成熟,从技术上对工控管理的可视化,数据可视化变得简单易行!完成对工控设备的管理效率,资源管理,风险管理等的大幅度提高,同时也对国家工业4.0计划作出有力响应! 如 ...
- lightning & web components & templates & slots
lightning & web components & templates & slots Web components, Custom elements, Template ...
- Web Components & HTML5 & template & slot
Web Components & HTML5 & template & slot https://developer.mozilla.org/en-US/docs/Web/HT ...
- 为HTML5开发人员量身打造的7个Web框架
HTML5规范开发完成时,将成为主流.据统计2013年全球将有10亿手机浏览器支持HTML5,同时HTML Web开发者数量将达到200万.毫无疑问,HTML5将成为未来5-10年内,移动互联网领域的 ...
- 使用 HTML5, javascript, webrtc, websockets, Jetty 和 OpenCV 实现基于 Web 的人脸识别
这是一篇国外的文章,介绍如何通过 WebRTC.OpenCV 和 WebSocket 技术实现在 Web 浏览器上的人脸识别,架构在 Jetty 之上. 实现的效果包括: 还能识别眼睛 人脸识别的核心 ...
- 【JavaScript Weekly】#471 — JANUARY 17, 2020
https://javascriptweekly.com/issues/471 #471 — JANUARY 17, 2020 READ ON THE WEB JavaScript Weekly Ba ...
- [转]使用Flexible实现手淘H5页面的终端适配
曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论—— ...
随机推荐
- es6数组必看太实用了
随着前后分离,前端人员也要写大量的逻辑代码,es5很多地方尤其是数据工具大拿数组,很多时候都是捉襟见肘. 继而,es6为我们扩展了很多good的工具和方法,让我们一起学习es6吧. 1原型方法from ...
- php5.5 安装
1.php安装 wget -O /etc/yum.repos.d/epel.repo http://mirrors.aliyun.com/repo/epel-6.repo yum install zl ...
- react native 调用Android原生方法
来源:https://www.youtube.com/watch?v=WmJpHHmOKM8 教程:https://www.youtube.com/watch?v=GiUo88TGebs Breaki ...
- bootstrap bootstrapvalidator插件+adjax验证使用
1.利用bootstrap Validator表单验证进行表单验证需要如下CSS和JS. <link rel="stylesheet" type="text/css ...
- 在web项目中发布jaxws
概述 在web项目中发布基于jaxws的webservice. 参考文章:用JAX-WS在Tomcat中发布WebService 参考文章说,如果不是servlet3.0及以上,需要配置servlet ...
- eclipse汉化 adt汉化
韩梦飞沙 韩亚飞 313134555@qq.com yue31313 han_meng_fei_sha
- 【BZOJ 3530】【SDOI 2014】数数
http://www.lydsy.com/JudgeOnline/problem.php?id=3530 上午gty的测试题,爆0了qwq 类似文本生成器那道题,把AC自动机的转移建出来,准确地说建出 ...
- BZOJ 3571 [Hnoi2014]画框(最小乘积完美匹配)
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=3571 [题目大意] 给出一张二分图,每条边上有a,b两个值,求完美匹配, 使得suma ...
- 【搜索】【约数个数定理】[HAOI2007]反素数ant
对于任何正整数x,其约数的个数记作g(x).例如g(1)=1.g(6)=4.如果某个正整数x满足:g(x)>g(i) 0<i<x,则称x为反质数. 所以,n以内的反质数即为不超过n的 ...
- django查询
阅读目录 大于.大于等于 小于.小于等于 在...范围内 模糊查询 是否为空 不等于/不包含于 大于.大于等于 1 2 3 4 5 __gt 大于 __gte 大于等于 User.objects. ...