html template tag
html template tag
const tagName = `emoji-element`;
const template = document.createElement('template');
template.innerHTML = `
<style>
:host {
display: block;
position: relative;
}
#image,
#placeholder ::slotted(*) {
position: absolute;
top: 0;
left: 0;
transition:
opacity
var(--emoji-element-fade-duration, 0.3s)
var(--emoji-element-fade-easing, ease);
object-fit: var(--emoji-element-fit, contain);
width: var(--emoji-element-width, 100%);
height: var(--emoji-element-height, 100%);
}
:host([fade]) #placeholder:not([aria-hidden="true"]) ::slotted(*),
:host([fade]) #image:not([aria-hidden="true"]) {
opacity: 1;
}
:host([fade]) #image,
:host([fade]) #placeholder[aria-hidden="true"] ::slotted(*) {
opacity: 0;
}
</style>
<div id="placeholder" aria-hidden="false">
<slot name="placeholder"></slot>
</div>
<img id="image" aria-hidden="true"/>
`;
html template
See the Pen Web Components & HTML template & HTML slot by xgqfrms
(@xgqfrms) on CodePen.
https://caniuse.com/#search=html templates
https://caniuse.com/#search=customElements
web components
https://caniuse.com/#search=web components
xgqfrms 2012-2020
www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
html template tag的更多相关文章
- Django里面的自定义tag和filter
Django的文档里面有这么一句 The app that contains the custom tags must be in INSTALLED_APPS in order for the { ...
- The Django template language 阅读批注
The Django template language About this document This document explains the language syntax of the D ...
- 18)django-模板的过滤器和tag,自定义simple_tag和filter
模板过滤器是在变量被显示前修改它的值的一个简单方法. 过滤器使用管道字符 . 模板标签(template tag) .标签(tag)定义比较明确,即: 仅通知模板系统完成某些工作的标签. 一:dja ...
- Django Template 进阶
回顾: Variables {{ var }} {{ dict.key }} {{ var.attr }} {{ var.method }} {{ varindex }} Filter {{ list ...
- mezzanine的page_menu tag
mezzanine的head 导航条.左侧tree.footer是由page_menu产生的.page_menu的算法,先计算出每一页的孩子,然后再逐页去page_menu. @register.re ...
- Vue.js教程--基础(实例 模版语法template computed, watch v-if, v-show v-for, 一个组件的v-for.)
官网:https://cn.vuejs.org/v2/guide/index.html Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统. 视频教程:https: ...
- 自定义django的Template context processors
简要步骤: 1.编辑一个函数: def media_url(request): from django.conf import settings return {'media_url': settin ...
- [Javascript] Format console.log with CSS and String Template Tags
The Chrome console allows you to format messages using CSS properties. This lesson walks you through ...
- HTML5 Template in Action
HTML5 Template in Action https://developer.mozilla.org/es/docs/Web/HTML/Elemento/template https://de ...
随机推荐
- js12种应该注意的地方
1. == Javascript有两组相等运算符,一组是==和!=,另一组是===和!==.前者只比较值的相等,后者除了值以外,还比较类型是否相同. 请尽量不要使用前一组,永远只使用===和!==.因 ...
- VirtualBox Guest Additions 下载地址以及简介
下载者可将以下链接粘贴到浏览器上,根据Vbox的版本找到自己对应的增强. http://download.virtualbox.org/virtualbox/5.0.10/ 虚拟机安装VBoxAddi ...
- 洛谷P2292
在<信息学奥赛一本通提高篇>中 Trie字典树 的课后练习看到这道题 然后我就用 Trie字典树 做了这道题 听说这道题的正解是 AC自动机,数据跑满时其他的算法都可以卡掉 然而数据没那么 ...
- 系列trick - 随机
系列trick - 随机 不断更新中,欢迎来提供idea 随机的字符串 出现次数 \(\ge 2\) 的子串期望长度是 \(\log n\) 两个随机串的期望LCP,LCSuf,LCSub长度是 \( ...
- COGS 307 模拟退火
307. [HAOI2006] 均分数据 ★★ 输入文件:data.in 输出文件:data.out 简单对比时间限制:3 s 内存限制:128 MB [问题描述] 已知N个正整数:A ...
- 接口鉴权之sign签名校验与JWT验证
需求描述: 项目里的几个Webapi接口需要进行鉴权,同接口可被小程序或网页调用,小程序里没有用户登录的概念,网页里有用户登录的概念,对于调用方来源是小程序的情况下进行放权,其他情况下需要有身份验证. ...
- Java并发练习
1.按顺序打印ABC 三个线程,每个线程分别打印A,B,C各十次,现在要求按顺序输出A,B,C package concurrency; import java.util.concurrent.Exe ...
- centos 7_本地源制作
1.安装工具 yum install yum-utils createrepo yum-plugin-priorities 2.自己创建一个阿里源 vim /etc/yum.repos.d/ope ...
- 设计模式c++(1)
本来是想把之前的<head first设计模式>看了,不过因为这本书是java实现的,跟c++还是略有区别. 于是找了一下,发现了一个不错的blog,打算连书带blog一起参考着看了. b ...
- php之在admin的目录下的php文件里加上JSON的报头,运行php文件会提示下载
去掉报头就正常,但在前端引用数据时要加上JSON.parse,不然读不出数据. $.get("fetchUpLast.php",{ rd:new Date().getTime()} ...