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 ...
随机推荐
- scrapy-redis非多网址采集的使用
问题描述 默认RedisSpider在启动时,首先会读取redis中的spidername:start_urls,如果有值则根据url构建request对象. 现在的要求是,根据特定关键词采集. 例如 ...
- 纯手工撸一个vue框架
前言 vue create 真的很方便,但是很多人欠缺的是手动撸一遍.有些人离开脚手架都不会开发了. Vue最简单的结构 步骤 搭建最基本的结构 打开空文件夹,通过 npm init 命令生成pack ...
- mysql本地中127.0.0.1连接不上数据库怎么办
首先在本地使用Navicat for MySQL建立一个bai数据库.在dreamweaver中建立一个PHP格式的网页,方便链接测试.测试发du现,如果zhi无法使用localhost链接mysql ...
- java定时任务之Qutaz
前不久一直在学习Qztaz,干好写了一个案例分享一下给大家,希望大家可以用得到. 那么现在开始吧, 一:什么事Qutaz? Quartz是OpenSymphony开源组织在Job scheduling ...
- 「一本通 1.3 例 4」Addition Chains
Addition Chains 题面 对于一个数列 \(a_1,a_2 \dots a_{m-1},a_m\) 且 \(a_1<a_2 \dots a_{m-1}<a_m\). 数列中的一 ...
- Linux 使用Vmware克隆，修改克隆机器内容
在Vmware中搭建好一台虚拟机,拍照快照,然后克隆其他集群进行练习,克隆后的机器都需要修改的内容有如下几点: 1:各机器之间,在网络上能够互相ping通 每台机器的IP地址必须是唯一的. 进入 ca ...
- java解压zip压缩包
package com.spring.mvc.zip; import java.io.File;import java.io.FileOutputStream;import java.io.Input ...
- 2.二层常用技术-Portfast和BPDU Guard、BPDU Filter
PortFast (生成树端口加速) 1.在交换机上使用portfast命令,可以防止出现由于STP的收敛时间太长,导致主机的DHCP请求超时,从而使主机不能接收到DHCP地址的问题. 确保有一台服务 ...
- 1.DHCP的定义
1.Dynamic Host Configuration Protocol (DHCP)是一种客户端/服务器协议,可自动向Internet协议(IP)主机提供其IP地址和其他相关配置信息,例如子网掩码 ...
- 2. Linux常用系统工作命令
1.echo:在终端输出字符串或变量提取后的值.echo [字符串 | $变量] 举例:[root@Centos~]# echo $SHELL /bin/bash 2.date:显示及设置系统的时间或 ...