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 ...
随机推荐
- token的分层图如下
基于 token 的多平台身份认证架构设
- Spring听课笔记（专题一）
Spring入门课程:https://www.imooc.com/learn/196 第0章: Spring是为解决企业应用程序开发复杂性而创建的一个Java开源框架,应用非常广泛.业内非常流行的SS ...
- 重绘和回流（Repaint & Reflow）总结，以及如何进行优化
1. 浏览器渲染机制 浏览器采用流式布局模型(Flow Based Layout) 浏览器会把HTML解析成DOM,把CSS解析成CSSOM,DOM和CSSOM合并就产生了渲染树(Render Tre ...
- Linux 使用Vmware克隆，修改克隆机器内容
在Vmware中搭建好一台虚拟机,拍照快照,然后克隆其他集群进行练习,克隆后的机器都需要修改的内容有如下几点: 1:各机器之间,在网络上能够互相ping通 每台机器的IP地址必须是唯一的. 进入 ca ...
- Kubernetes --（k8s）Job、CronJob
Job https://www.kubernetes.org.cn/job https://www.kubernetes.org.cn/cronjob Job负责批量处理短暂的一次性任务 (short ...
- codeforces 1461D，离线查询是什么神仙方法，为什么快这么多？
大家好,欢迎来到codeforces专题. 今天我们选择的题目是1461场次的D题,这题全场通过了3702人,从难度上来说比较适中.既没有很难,也很适合同学们练手.另外它用到了一种全新的思想是在我们之 ...
- 用Python修改本机适配器信息
主要参考来自[用Python干实事(一)自动修改Windows的IP.网关和DNS设置]. 使用_winreg模块来操作注册表实现相关信息的修改,它是python的内置模块.也可以通过Win32 Ex ...
- Codeforces Round #628 (Div. 2) B. CopyCopyCopyCopyCopy（Set）
题意: 给你一个数组,可以像题目那样无限拼接,问递增子序列的最大长度(可不连续). 思路: 序列的最大长度即为数组中不同元素的个数. Tips: 一开始不知道back-to-back什么意思,看到题目 ...
- hdu 6863 Isomorphic Strings 哈希+求公因子
题意: t组输入,每组数据输入一个整数n,代表字符串长度.下面再输入一个字符串 你需要判断这个字符串能不能分成大于1段,且这些段的最小表示法是一样的 例如:abccab,它可以分成2段,分别是abc和 ...
- Codeforces Global Round 4 B. WOW Factor (前缀和,数学)
题意:找出序列中有多少子序列是\(wow\),但是\(w\)只能用\(vv\)来表示. 题解:我们分别记录连续的\(v\)和\(o\)的个数,用\(v1\)和\(v2\)存,这里要注意前导\(o\)不 ...