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 ...
随机推荐
- physical CPU vs logical CPU vs Core vs Thread vs Socket(翻译)
原文地址: http://www.daniloaz.com/en/differences-between-physical-cpu-vs-logical-cpu-vs-core-vs-thread-v ...
- c++ 三五法则 自己理解
简介 三五法则规定了什么时候需要 1 拷贝构造函数 2 拷贝赋值函数 3 析构函数 1. 需要析构函数的类也需要拷贝构造函数和拷贝赋值函数. 通常,若一个类需要析构函数,则代表其合成的析构函数 ...
- jQuery——操作DOM
所谓Web体验,就是Web服务器与Web浏览器之间的合作.过去,都是由服务器生成HTML文档,然后浏览器负责解释并显示该文档.后来,我们可以用CSS技术来动态修改页面的外观. ###操作属性 jQue ...
- linux环境变量 shell变量 command not found解决方法(转)
在Ubuntu.centos中有如下几个文件可以设置环境变量1./etc/profile:在登录时,操作系统定制用户环境时使用的第一个文件,此文件为系统的每个用户设置环境信息,当用户第一次登录时,该文 ...
- 读取EXCEL文档解析工具类
package test;import java.io.File;import java.io.FileInputStream;import java.io.FileNotFoundException ...
- FatMouse and CheeseI - I
FatMouse has stored some cheese in a city. The city can be considered as a square grid of dimension ...
- HDU 3449 依赖背包
这道题虽然水水的,但是还是成功地给我增加了10多个WA. 最开始拿着题,一看,依赖背包嘛~直接DFS树形DP嗨起来,甚至连内存都没有算一下,3MLE: 然后又仔细看了一下题,没有必要用树形背包来做嘛, ...
- HDOJ 2955
这道背包题和我们常见的背包题有所不同.如果根据以前做背包的惯性思维和题中数据的迷惑,会把概率乘以100来当作容量.但是经测试是不行的. 我们不妨换种思路,看做DAG上的DP思想.将所有有可能达到的钱的 ...
- 【noi 2.6_9268】酒鬼(DP)
题意:有N瓶酒,不能连续喝>=3瓶的酒,问能喝的最大的酒量. 解法:同前一题相似,可以f[i][j]表示前i瓶中连续喝了j瓶的最大酒量.1.f[i][0]=f[i-1][3] ; 2.i=1或2 ...
- poj3260 The Fewest Coins
Description Farmer John has gone to town to buy some farm supplies. Being a very efficient man, he a ...