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. int ping = 11; 限流 客户端验证与服务端是连接的

    int ping = 11; ZooKeeper Programmer's Guide https://zookeeper.apache.org/doc/r3.1.2/zookeeperProgram ...

  2. 选出ip记录表最近的10行数据

    w select * from wip where id>(select (select max(id)from wip)-10) ;

  3. Flink-v1.12官方网站翻译-P026-State Backends

    状态后台 Flink提供了不同的状态后端,指定状态的存储方式和位置. 状态可以位于Java的堆上或离堆.根据你的状态后端,Flink还可以为应用程序管理状态,这意味着Flink处理内存管理(必要时可能 ...

  4. 使用 noexcept 我们需要知道什么？

    noexcept 关键字 noexcept 是什么? noexcept 是自 C++11 引入的新特性,指定函数是否可能会引发异常,以下是 noexcept 的标准语法: noexcept-expre ...

  5. 前n项余数个数和

    一:O(n) 计算贡献:前n项中,能被i(1~n)整除的数的个数为(n/i)个,,也就是 i 给前n项中(n/i)个数做了余数 #include<iostream> using names ...

  6. HDU6061 RXD and functions【NTT】

    \(RXD\ and\ functions\) Problem Description RXD has a polynomial function \(f(x)\), \(f(x)=\sum ^{n} ...

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

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

  8. Educational Codeforces Round 102 (Rated for Div. 2) D. Program (思维,前缀和)

    题意:给你一个只含\(+\)和\(-\)的字符串,给你一个数\(x\),\(x\)初始为\(0\),随着字符串的遍历会加一减一,现在有\(m\)个询问,每个询问给出一个区间\([l,r]\)表示将这个 ...

  9. Alice's mooncake shop HDU - 4122 单调队列

    题意: 有n个订单和可以在m小时内制作月饼,制作月饼不考虑时间(即,你可以在一个时刻在所有需要的月饼都做完) 接下来是n个订单的信息:需要在mon月,d日,year年,h小时交付订单r个月饼 接下来一 ...

  10. hdu5414 CRB and String

    Problem Description CRB has two strings s and t. In each step, CRB can select arbitrary character c  ...