HTML5 & custom element & template

template

https://codepen.io/xgqfrms/pen/eYYExvp

https://css-tricks.com/creating-a-custom-element-from-scratch/



<template id="dialog-template">
<script>
document.getElementById('launch-dialog').addEventListener('click', () => {
const wrapper = document.querySelector('.wrapper');
const closeButton = document.querySelector('button.close');
const wasFocused = document.activeElement;
wrapper.classList.add('open');
closeButton.focus();
closeButton.addEventListener('click', () => {
wrapper.classList.remove('open');
wasFocused.focus();
});
});
</script>
<style>
.wrapper {
opacity: 0;
transition: visibility 0s, opacity 0.25s ease-in;
}
.wrapper:not(.open) {
visibility: hidden;
}
.wrapper.open {
align-items: center;
display: flex;
justify-content: center;
height: 100vh;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 1;
visibility: visible;
}
.overlay {
background: rgba(0, 0, 0, 0.8);
height: 100%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
}
.dialog {
background: #ffffff;
max-width: 600px;
padding: 1rem;
position: fixed;
}
button {
all: unset;
cursor: pointer;
font-size: 1.25rem;
position: absolute;
top: 1rem;
right: 1rem;
}
button:focus {
border: 2px solid blue;
}
</style>
<div class="wrapper">
<div class="overlay"></div>
<div class="dialog" role="dialog" aria-labelledby="title" aria-describedby="content">
<button class="close" aria-label="Close">️</button>
<h1 id="title">Hello world</h1>
<div id="content" class="content">
<p>This is content in the body of our modal</p>
</div>
</div>
</div>
</template> <button id="launch-dialog">Launch dialog</button>
const template = document.getElementById('dialog-template');

document.body.appendChild(
document.importNode(template.content, true)
);

#launch-dialog {
background: tomato;
border-radius: 4px;
color: #fff;
font-family: Helvetica, Arial, sans-serif;
padding: 0.5rem 1rem;
position: static;
}

web components & custom elements

https://www.html5rocks.com/en/tutorials/webcomponents/customelements/

https://developers.google.com/web/fundamentals/web-components/customelements





HTML5 & command element

https://www.quackit.com/html_5/tags/html_command_tag.cfm

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/command

<command
type="command"
label="Save"
icon="icons/save.png"
onclick="save()"
/>

2018

https://caniuse.com/#search=command

2020

https://caniuse.com/#search=command



HTML5 & custom element & template的更多相关文章

  1. WebComponent魔法堂:深究Custom Element 之 从过去看现在

    前言  说起Custom Element那必然会想起那个相似而又以失败告终的HTML Component.HTML Component是在IE5开始引入的新技术,用于对原生元素作功能"增强& ...

  2. HTML语义化:HTML5新标签——template

    一.前言 当我们使用String-base的模板引擎(如Handlebars.js等)时,要么就通过外部文件存放模板文本,需要时再通过XHR或script标签加载进来:要么通过<script t ...

  3. 使用vue.js路由踩到的一个坑Unknown custom element

    在配合require.js使用vue路由的时候,遇到了路由组件报错: “vue.js:597 [Vue warn]: Unknown custom element: <router-link&g ...

  4. Vue报错之" [Vue warn]: Unknown custom element: <wzwzihello> - did you register the component correctly? For recursive components, make sure to provide the "name" option."

    一.报错截图 [Vue warn]: Unknown custom element: <wzwzihello> - did you register the component corre ...

  5. WebComponent魔法堂:深究Custom Element 之 标准构建

    前言  通过<WebComponent魔法堂:深究Custom Element 之 面向痛点编程>,我们明白到其实Custom Element并不是什么新东西,我们甚至可以在IE5.5上定 ...

  6. WebComponent魔法堂:深究Custom Element 之 面向痛点编程

    前言  最近加入到新项目组负责前端技术预研和选型,一直偏向于以Polymer为代表的WebComponent技术线,于是查阅各类资料想说服老大向这方面靠,最后得到的结果是:"资料99%是英语 ...

  7. angular custom Element 自定义web component

    angular 自定义web组件: 首先创建一个名为myCustom的组件. 引入app.module: ... import {customComponent} from ' ./myCustom. ...

  8. (错误记录)Vue: Unknown custom element

    错误: vue.js:634 [Vue warn]: Unknown custom element: <ve-pie> - did you register the component c ...

  9. vue报错[Vue warn]: Unknown custom element: <router-Link> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

    vue浏览器报错,如下 vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: <router-Link> - di ...

随机推荐

  1. 从零开始学Java (四)输入输出

    这块内容对于有基础的人没啥好说的... 1 System.out.print("C"); 2 System.out.println(); 上边和下边等价 1 System.out. ...

  2. tcp服务器

    如同上面的电话机过程一样,在程序中,如果想要完成一个tcp服务器的功能,需要的流程如下: socket创建一个套接字 bind绑定ip和port listen使套接字变为可以被动链接 accept等待 ...

  3. 【ElasticSearch】 使用AWS云ES服务来分析程序日志

    最近公司系统升级,有些API的调用接口达到了每天10几万的请求量.目前公司里的日志,都是写文本文件中的.为了能够更好的分析这些日志数据,公司采用了AWS 的 ElasticSearch服务来分析日志. ...

  4. 提高效率的Linux命令

    提高效率的Linux命令 一.fc 二.disown 三.Ctrl + x +e 四.!! 两个感叹号 五.一次创建多个目录或文件 六.tee 七.删除从开头到光标处的命令文本 八.删除从光标到结尾处 ...

  5. Kafka调试入门(一)

    很多人对kafka消息队列应该不陌生,使用起来也比较方便.对kafka最常见的操作一般有如下几种: 启动kafka集群 创建一个名称为xxx的主题(topic) 查看已经创建好的主题 向xxx这个主题 ...

  6. 封装Vue Element的可编辑table表格组件

    前一段时间,有博友在我那篇封装Vue Element的table表格组件的博文下边留言说有没有那种"表格行内编辑"的封装组件,我当时说我没有封装过这样的组件,因为一直以来在实际开发 ...

  7. B - Power Strings

    Given two strings a and b we define a*b to be their concatenation. For example, if a = "abc&quo ...

  8. 2019牛客暑期多校训练营(第一场)I Points Division(dp+线段树优化)

    给你n个点,第i个点在的位置为(xi,yi),有两个属性值(ai,bi).现在让你把这n个点划分为A和B两个部分,使得最后不存在i∈A和j∈B,使得xi>=xj且yi<=yj.然后对于所有 ...

  9. zjnu1749 PAROVI (数位dp)

    Description The distance between two integers is defined as the sum of the absolute result of subtra ...

  10. HDU 3336——Count the string

    It is well known that AekdyCoin is good at string problems as well as number theory problems. When g ...