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 ...
随机推荐
- Cannot assign requested address问题总结
Cannot assign requested address问题总结 - 简书 https://www.jianshu.com/p/51a953b789a4 python3 server.pyE07 ...
- 为了更好的多线程性能,在对象创建或者更新时,若数据大于2047字节则 Python 的 GIL 会被释放。 执行计算密集型任务如压缩或哈希时释放 GIL
hashlib - Secure hashes and message digests - Python 3.8.3 documentation https://docs.python.org/3.8 ...
- calc, support, media各自的含义及用法?
@support主要是用于检测浏览器是否支持CSS的某个属性,其实就是条件判断,如果支持某个属性,你可以写一套样式,如果不支持某个属性,你也可以提供另外一套样式作为替补. calc() 函数用于动态计 ...
- SparkSQL访问Hive源,MySQL源
SparkSQL访问Hive源,MySQL源 一.SparkSQL访问Hive源 软件环境 SparkSQL命令行模式可以直接连接Hive的 Java程序SparkSQL连接Hive 二.SparkS ...
- linux常用命令(shell脚本常用命令)(grep、cut、sort、uniq、seq、tr、basename、dirname)
本章命令: 1 2 3 4 5 6 grep cut sort uniq seq tr 1.grep 作用:过滤文本内容 选项 描述 -E :--extended--regexp 模式是扩展正则表达式 ...
- docker启动脚本
#!/bin/bash # 定义环境变量 export LANG="en_US.UTF-8" #统一格式化打印输出信息 printMsg(){ echo "$(date ...
- 肝了一个半月的 Java 项目快速开发脚手架:Chewing
前言 闲来无事,整一个 Java 项目快速开发脚手架. 正文 一.简介 Chewing 是一个简单的 Java 项目快速开发脚手架.既适合需要开发小型项目的小伙伴使用,也适合刚入门的新手用来学习一些常 ...
- kafka 通俗
把broker比作是一幢摩天大楼,一个10节点的kafka集群就是10幢摩天大楼,而且这些大楼都长得一模一样.分区就相当于大楼里的一层.一个分区就相当于一整层哦.原先大楼是空的.现在用户创建了一个to ...
- centos 7 部署nginx及libfastcommon
1.编译环境 (centos)yum install git gcc gcc-c++ make automake autoconf libtool pcre pcre-devel zlib zlib- ...
- 【poj 2478】Farey Sequence(数论--欧拉函数 找规律求前缀和)
题意:定义 Fn 序列表示一串 <1 的分数,分数为最简分数,且分母 ≤n .问该序列的个数.(2≤N≤10^6) 解法:先暴力找规律(代码见屏蔽处),发现 Fn 序列的个数就是 Φ(1)~Φ( ...