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 ...
随机推荐
- 栈 堆 stack heap 堆内存 栈内存 内存分配中的堆和栈 掌握堆内存的权柄就是返回的指针 栈是面向线程的而堆是面向进程的。 new/delete and malloc/ free 指针与内存模型
小结: 1.栈内存 为什么快? Due to this nature, the process of storing and retrieving data from the stack is ver ...
- 踹树(Trie 字典树)
Trie 字典树 ~~ 比 KMP 简单多了,无脑子选手学不会KMP,不会结论题~~ 自己懒得造图了OI WIKI 真棒 字典树大概长这么个亚子 呕吼真棒 就是将读进去的字符串根据当前的字符是什么和所 ...
- IO多路复用与epoll机制浅析
epoll是Linux中用于IO多路复用的机制,在nginx和redis等软件中都有应用,redis的性能好的原因之一也就是使用了epoll进行IO多路复用,同时epoll也是各大公司面试的热点问题. ...
- JQuery——相关练习
####JQuery的基本语法 <!--导入JQuery文件--> <script src="js/jquery-3.1.1.min.js"> /*带min ...
- PyQt中ui编译成窗体.py,中文乱码
我在Eric工具下编译的 解决办法: 1.打开 C:\Python27\Lib\site-packages\eric4\i18n,将中文资源包的名称"GB2312."去掉,变成er ...
- 基于efcore的分表组件开源
ShardingCore ShardingCore 是一个支持efcore 2.x 3.x 5.x的一个对于数据库分表的一个简易扩展, 目前该库暂未支持分库(未来会支持),仅支持分表,该项目的理念是让 ...
- [源码分析] Dynomite 分布式存储引擎 之 DynoJedisClient(1)
[源码分析] Dynomite 分布式存储引擎 之 DynoJedisClient(1) 目录 [源码分析] Dynomite 分布式存储引擎 之 DynoJedisClient(1) 0x00 摘要 ...
- Pytest(18)pytest接口自动化完整框架思维导图
pytest接口自动化完整框架思维导图
- SpringMVC学习笔记2
一.日期赋值 目标:在springMVC中日期赋值兼容性更广泛 不能直接处理,必须使用转换器1.定义转换器,实现接口Converter<From,To> package com.zy.co ...
- 【poj 2891】Strange Way to Express Integers(数论--拓展欧几里德 求解同余方程组 模版题)
题意:Elina看一本刘汝佳的书(O_O*),里面介绍了一种奇怪的方法表示一个非负整数 m .也就是有 k 对 ( ai , ri ) 可以这样表示--m%ai=ri.问 m 的最小值. 解法:拓展欧 ...