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 ...
随机推荐
- （Oracle）DDL及其数据泵导入导出（impdp/expdp）
create tablespace ybp_dev datafile 'G:\app\Administrator\oradata\health\ybp_dev1.dbf' size 10m autoe ...
- jQuery.qrcode二维码插件生成网页二维码
如果是一个固定的二维码,我们只需要在网上找个地方生成图片,然后放上图片就可以了.但如果是地址不固定需要根据页面来生成的话.就有两种做法,一个是后端根据页面做一个动态的二维码.一种是前端使用插件生成. ...
- java解压zip压缩包
package com.spring.mvc.zip; import java.io.File;import java.io.FileOutputStream;import java.io.Input ...
- 利用Java反射机制将Bean转成Map
import java.lang.reflect.Field; import java.lang.reflect.InvocationTargetException; import java.lang ...
- kafka背着你做了什么？
Kafka中有broker.主题.分区.副本等概念,底层有日志和日志分片. 我们先简单介绍一下这些概念,做个类比. broker可以简单理解为一台物理机,其实一台机器上可以有多个broker进程,但是 ...
- docker 运用
本文采用centos7,记录docker的简单运用方式 https://www.runoob.com/docker/docker-container-usage.html 1.安装odcker 2.启 ...
- Spring（IOC、AOP和事务）
目录 Spring介绍 Spring IOC 传统代码对象管理的弊端 实现过程 bean标签属性介绍 对象创建方式 工厂bean bean的作用域 SpringBean的生命周期*** 依赖注入 注解 ...
- SparkCore2
二.RDD编程 2.5 RDD中的函数传递 在实际开发中我们往往需要自己定义一些对于RDD的操作,那么此时需要主要的是,初始化工作是在Driver端进行的,而实际运行程序是在Executor端进行的, ...
- hdu1217 Arbitrage
Problem Description Arbitrage is the use of discrepancies in currency exchange rates to transform on ...
- AtCoder Beginner Contest 173 C - H and V (二进制枚举)
题意:有一张图,.表示白色,#表示黑色,每次可以将多行和多列涂成红色(也可不涂),问有多少种方案,使得剩下黑点的个数为\(k\). 题解:又学到了新的算法qwq,因为这题的数据范围很小,所以可以用二进 ...