HTML Custom Elements (v1)
HTML Custom Elements (v1)
https://developers.google.com/web/fundamentals/web-components/customelements
Web Components
https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements
https://caniuse.com/#search=HTML Custom Elements
Web Components
Web components is a meta-specification made possible by four other specifications:
The Custom Elements specification
The shadow DOM specification
The HTML Template specification
The ES Module specification
https://www.webcomponents.org/specs
Custom Elements
An unknown autonomous custom element is like a element: its default CSS display property is inline
浏览器不能识别的 HTML Tag 等效于 span 元素, 即 custom element 如果没有使用 web components 的规范进行 element 注册的话!
- autonomous custom elements
，好使，自己完全控制(属性，事件，可访问性)
- customized built-in elements / extending native HTML elements
，不好使，浏览器支持度不高，不推荐
demo
UFO, 未注册的 custom element
See the Pen HTML5 custom element tag by xgqfrms
(@xgqfrms) on CodePen.
UFO, 注册的 custom element
See the Pen HTML5 custom element tag (web components) by xgqfrms
(@xgqfrms) on CodePen.
Shadow DOM
https://www.webcomponents.org/specs#the-shadow-dom-specification
refs
https://www.webcomponents.org/specs
https://html.spec.whatwg.org/multipage/custom-elements.html
https://github.com/w3c/webcomponents/issues/509
IMHO / 恕我直言
xgqfrms 2012-2020
www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！
HTML Custom Elements (v1)的更多相关文章
- Web Components之Custom Elements
什么是Web Component? Web Components 包含了多种不同的技术.你可以把Web Components当做是用一系列的Web技术创建的.可重用的用户界面组件的统称.Web Com ...
- 自定义元素（custom elements）
记录下自定义html自定义元素的相关心得: 浏览器将自定义元素保留在 DOM 之中,但不会任何语义.除此之外,自定义元素与标准元素都一致 事实上,浏览器提供了一个HTMLUnknownElement, ...
- [HTML5] Render Hello World Text with Custom Elements
Custom elements are fun technology. In this video, you will learn how to set one up and running in l ...
- 使用custom elements和Shadow DOM自定义标签
具体的api我就不写 官网上面多 如果不知道这个的话也可以搜索一下 目前感觉这个还是相当好用的直接上码. <!DOCTYPE html> <html lang="en&q ...
- window 属性：自定义元素（custom elements）
概述 Web Components 标准非常重要的一个特性是,它使开发者能够将HTML页面的功能封装为 custom elements(自定义标签),而往常,开发者不得不写一大堆冗长.深层嵌套的标 ...
- HTML Custom Elements & valid name
HTML Custom Elements & valid name valid custom element name https://html.spec.whatwg.org/multipa ...
- [Polymer] Custom Elements: Styling
Code: <dom-module id="business-card"> <template> <div class="card" ...
- Knockoutjs：Component and Custom Elements（翻译文章）
Knockoutjs 的Components 是一种自定义的组件,它以一种强大.简介的方式将你自己的ui代码组织成一种单独的.可重用的模块,自定义的组件(Component)有以下特点: 1.可以替代 ...
- webAssmebly实现js数组排序 使用custom elements和Shadow DOM自定义组件
直接上码了……………… .wat源码 (module (type $t0 (func (param i32 i32))) (type $t1 (func (result i32))) (type $t ...
随机推荐
- 列出HBASE所有表的相关信息，如表名、创建时间等。
import java.io.IOException; import java.util.Collection; import java.util.Iterator; import org.apach ...
- udp聊天器
import socket def send_msg(udp_socket): """获取键盘数据,并将其发送给对方""" # 1. 从键盘 ...
- windows.open、 window.location.href
windows.open("URL","窗口名称","窗口外观设定");打开新窗口,window对象的方法 不一定打开新窗口,只要有窗口的名 ...
- MySql（二）索引的设计与使用
MySql(二)索引的设计与使用 一.索引概述 二.设计索引的原则 三.BTREE索引与HASH索引 一.索引概述 所有Mysql列类型都可以被索引,对相关列使用索引时提高select操作性能的最佳途 ...
- Spring Boot，Spring Cloud，Eureka，Actuator，Spring Boot Admin，Stream，Hystrix
Spring Boot,Spring Cloud,Eureka,Actuator,Spring Boot Admin,Stream,Hystrix 一.Spring Cloud 之 Eureka. 1 ...
- C++复习笔记（1）
复(su)习(cheng)一下c++. 1. 函数 函数重载:允许用同一函数名定义多个函数,但这些函数必须参数个数不同或类型不同. 函数模版: (应该是跟java的泛化类似,内容待扩展) templa ...
- 深信服上网行为管理配置跨三层MAC识别
1.在认证高级选项里点击新增 如果PC的IP和MAC存在于多个三层交换机,则需新增多个. 点击上图"查看服务器信息"测试能否从交换机获取PC的IP和MAC,有返回结果则能正常获取, ...
- 免费开源的代码审计工具 Gosec 入门使用
声明: 本教程是在自己的电脑上本地测试Gosec的效果,所以不涉及其他运行模式,如果想要了解其他模式可以关注后期文档,如果想要自定义交流自定义代码扫描规则,可以跟我交流沟通. 背景: Gosec是一个 ...
- cassandra权威指南读书笔记--读写数据
写cassandra除了轻量级事务,不支持别的事务.cassandra是追加写,写的速度非常快.cassandra还有hint日志,这个数据库总是可写的,而且单个列的写操作是原子的.hint并不是一定 ...
- The Preliminary Contest for ICPC Asia Shenyang 2019 D. Fish eating fruit（树形dp）
题意:求一棵树上所有路径和模3分别为0 1 2 的权值的和 思路:树形dp 增加一个记录儿子节点满足条件的个数的数组 不要放在一起dp不然答案跟新会有问题 #include <bits/stdc ...