Shadow DOM 与 HTML Templates
来源:互联网 发布:sql截取日期的年月日 编辑:程序博客网 时间:2024/05/21 09:37
在之前的Web Components系列文章中,简单介绍了Web Components概要,HTML Templates,Shadow DOM,Shadow DOM(二)。
本文将在此基础上,介绍Shadow DOM与HTML Templates如何一起协作。
在Shadow DOM(二)中,介绍了如何创建Shadow DOM:通过调用createShadowRoot()方法创建root节点,然后在JavaScript中创建普通的HTML节点, 并将这些节点附到Shadow Root上。但这种方式比较繁琐,因为普通的HTML标签也要通过JavaScript方法创建。普通的HTML节点,应该通过声明式的方式创建更为方便、合理。
而HTML Templates便为我们提供了实现这一目的的能力。HTML Templates的介绍,可见这里。
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Demo</title></head><body> <div class="host">Hello World!</div> <template id="tmpl"> <h1>Shadow DOM 介绍</h1> <p>Shadow DOM 详细信息</p> </template> <script> var host = document.querySelector('.host'); var root = host.createShadowRoot();<pre name="code" class="html"> var tmpl = document.querySelector('#tmpl');root.appendChild(document.importNode(tmpl.content, true)); </script></body></html>
在这个示例代码中,首先通过template标签创建一个HTML模板。在JavaScript前面两行代码与Shadow DOM(二)中的示例是一样的,后面两行代码,首先是获取到template节点,然后将template的内容(content)拷贝后附加到root上。
在浏览器中运行,得到效果如下图所示:
通过这个示例,可以看到如何在创建Shadow DOM的过程中借助Template来实现,这种方式更为简便,而且在template中还可以包含样式等信息,如果在JavaScript中直接创建的话,不仅繁琐而且可维护性很差。
0 0
- Shadow DOM 与 HTML Templates
- 【Shadow DOM】 渲染与隔离
- Shadow DOM
- shadow dom
- Shadow DOM
- HTML Templates
- 核心DOM与HTML DOM
- DOM、javaScript与HTML
- [译]什么是Shadow Dom?
- [译]什么是Shadow Dom?
- Shadow DOM(二)
- [Repost]Shadow DOM 101
- shadow dom介绍
- 神奇的Shadow DOM
- 区别:DOM Core 与 HTML-DOM
- 区别:DOM Core 与 HTML-DOM
- xml dom document与html dom document
- HTML DOM与核心DOM的区别
- nosql
- Android中使用WebView, WebChromeClient和WebViewClient加载网页
- POJ 2533 Longest Ordered Subsequence
- 优化网站加载速度的14个技巧
- 用NAT实现外网对内网服务器的访问
- Shadow DOM 与 HTML Templates
- android assets/raw 大文件读取
- 环形缓冲区
- postgres插入默认值 如果select查询不到默认值
- 声道
- orale数据类型对应java类型
- OpenCV学习--saturate_cast防止数据溢出
- java.sql.Clob转String
- SDI应用程序调用DestroyWindow()退出程序出现异常引起的一些思考