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 注册的话!

  1. autonomous custom elements

，好使，自己完全控制(属性，事件，可访问性)

  1. 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://stackoverflow.com/questions/40323660/best-practices-autonomous-custom-elements-vs-extending-native-html-elements-cu

https://github.com/w3c/webcomponents/issues/509

IMHO / 恕我直言

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

HTML Custom Elements (v1)的更多相关文章

  1. Web Components之Custom Elements

    什么是Web Component? Web Components 包含了多种不同的技术.你可以把Web Components当做是用一系列的Web技术创建的.可重用的用户界面组件的统称.Web Com ...

  2. 自定义元素（custom elements）

    记录下自定义html自定义元素的相关心得: 浏览器将自定义元素保留在 DOM 之中,但不会任何语义.除此之外,自定义元素与标准元素都一致 事实上,浏览器提供了一个HTMLUnknownElement, ...

  3. [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 ...

  4. 使用custom elements和Shadow DOM自定义标签

    具体的api我就不写 官网上面多  如果不知道这个的话也可以搜索一下 目前感觉这个还是相当好用的直接上码. <!DOCTYPE html> <html lang="en&q ...

  5. window 属性：自定义元素（custom elements）

      概述 Web Components 标准非常重要的一个特性是,它使开发者能够将HTML页面的功能封装为 custom elements(自定义标签),而往常,开发者不得不写一大堆冗长.深层嵌套的标 ...

  6. HTML Custom Elements & valid name

    HTML Custom Elements & valid name valid custom element name https://html.spec.whatwg.org/multipa ...

  7. [Polymer] Custom Elements: Styling

    Code: <dom-module id="business-card"> <template> <div class="card" ...

  8. Knockoutjs：Component and Custom Elements（翻译文章）

    Knockoutjs 的Components 是一种自定义的组件,它以一种强大.简介的方式将你自己的ui代码组织成一种单独的.可重用的模块,自定义的组件(Component)有以下特点: 1.可以替代 ...

  9. webAssmebly实现js数组排序 使用custom elements和Shadow DOM自定义组件

    直接上码了……………… .wat源码 (module (type $t0 (func (param i32 i32))) (type $t1 (func (result i32))) (type $t ...

随机推荐

  1. 任何Python线程执行前，必须先获得GIL锁，然后，每执行100条字节码，解释器就自动释放GIL锁，让别的线程有机会执行

    任何Python线程执行前,必须先获得GIL锁,然后,每执行100条字节码,解释器就自动释放GIL锁,让别的线程有机会执行 多线程 - 廖雪峰的官方网站 https://www.liaoxuefeng ...

  2. OIer 生涯绊脚石

    字符串 哈希进制搞质数 \({\color{OrangeRed}{KMP}}\) 数组别开太大,否则 \({\color{Gold}{TLE}}\) 没有必要 \({\color{Cyan}{strl ...

  3. 高性能数据导入方案&表过滤器&一对多支持筛选- .NET SqlSugar ORM

    一.数据导入有哪些难题 1.数据分类 你需要将 插入.更新.忽略不计.错误数据 等进么分类汇总,最后返回给客户,如果没有很好的设计想把这些操作一步到位非常的难 2.高性能 对于插入或者更新 肯定不能单 ...

  4. 如何使用Conda源快速安装PyTorch？

    数据科学交流群,群号:189158789,欢迎各位对数据科学感兴趣的小伙伴的加入! 1.切换国内源 1.1.在家目录生成.condarc conda config --set show_channel ...

  5. java 去掉重复的数字

    public static void main(String[] args) { String s="1,2,2,2,2,2,3,3,3"; String[] array = s. ...

  6. C语言实现2048小游戏

    目录 2048 一.设计思路 1.游戏规则 2.思路 二.代码实现 1.存储结构 2.初始化游戏数据 3.向左合并 4.其他方向合并 5.产生新的方块 6.源代码 7.实例演示 三.问题 2048 一 ...

  7. Scala集合库、模式匹配和样例类

    package com.yz8 import org.junit.Test class test { @Test def test: Unit = { val ints = List(1,5,7,6, ...

  8. Codeforces Round #648 (Div. 2) E. Maximum Subsequence Value（鸽巢原理）

    题目链接:https://codeforces.com/problemset/problem/1365/E 题意 有 $n$ 个元素,定义大小为 $k$ 的集合值为 $\sum2^i$,其中,若集合内 ...

  9. P1108 低价购买（DP）

    题目描述 "低价购买"这条建议是在奶牛股票市场取得成功的一半规则.要想被认为是伟大的投资者,你必须遵循以下的问题建议:"低价购买:再低价购买".每次你购买一支股 ...

  10. Codeforces Round #683 (Div. 2, by Meet IT) D. Catching Cheaters (DP)

    题意:给你两个字符串,每次取它们的子串C和D,然后求LCS,得到的贡献为\(4*LCS(C,D)-|C|-|D|\),求最大贡献. 题解:首先应该了解\(O(n^2)\)的LCS的dp写法,然后在此基 ...