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的更多相关文章

  1. Django里面的自定义tag和filter

    Django的文档里面有这么一句 The app that contains the custom tags must be in INSTALLED_APPS  in order for the { ...

  2. The Django template language 阅读批注

    The Django template language About this document This document explains the language syntax of the D ...

  3. 18)django-模板的过滤器和tag,自定义simple_tag和filter

    模板过滤器是在变量被显示前修改它的值的一个简单方法. 过滤器使用管道字符 . 模板标签(template tag) .标签(tag)定义比较明确,即: 仅通知模板系统完成某些工作的标签.  一:dja ...

  4. Django Template 进阶

    回顾: Variables {{ var }} {{ dict.key }} {{ var.attr }} {{ var.method }} {{ varindex }} Filter {{ list ...

  5. mezzanine的page_menu tag

    mezzanine的head 导航条.左侧tree.footer是由page_menu产生的.page_menu的算法,先计算出每一页的孩子,然后再逐页去page_menu. @register.re ...

  6. 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: ...

  7. 自定义django的Template context processors

    简要步骤: 1.编辑一个函数: def media_url(request): from django.conf import settings return {'media_url': settin ...

  8. [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 ...

  9. HTML5 Template in Action

    HTML5 Template in Action https://developer.mozilla.org/es/docs/Web/HTML/Elemento/template https://de ...

随机推荐

  1. js12种应该注意的地方

    1. == Javascript有两组相等运算符,一组是==和!=,另一组是===和!==.前者只比较值的相等,后者除了值以外,还比较类型是否相同. 请尽量不要使用前一组,永远只使用===和!==.因 ...

  2. VirtualBox Guest Additions 下载地址以及简介

    下载者可将以下链接粘贴到浏览器上,根据Vbox的版本找到自己对应的增强. http://download.virtualbox.org/virtualbox/5.0.10/ 虚拟机安装VBoxAddi ...

  3. 洛谷P2292

    在<信息学奥赛一本通提高篇>中 Trie字典树 的课后练习看到这道题 然后我就用 Trie字典树 做了这道题 听说这道题的正解是 AC自动机,数据跑满时其他的算法都可以卡掉 然而数据没那么 ...

  4. 系列trick - 随机

    系列trick - 随机 不断更新中,欢迎来提供idea 随机的字符串 出现次数 \(\ge 2\) 的子串期望长度是 \(\log n\) 两个随机串的期望LCP,LCSuf,LCSub长度是 \( ...

  5. COGS 307 模拟退火

    307. [HAOI2006] 均分数据 ★★   输入文件:data.in   输出文件:data.out   简单对比时间限制:3 s   内存限制:128 MB [问题描述] 已知N个正整数:A ...

  6. 接口鉴权之sign签名校验与JWT验证

    需求描述: 项目里的几个Webapi接口需要进行鉴权,同接口可被小程序或网页调用,小程序里没有用户登录的概念,网页里有用户登录的概念,对于调用方来源是小程序的情况下进行放权,其他情况下需要有身份验证. ...

  7. Java并发练习

    1.按顺序打印ABC 三个线程,每个线程分别打印A,B,C各十次,现在要求按顺序输出A,B,C package concurrency; import java.util.concurrent.Exe ...

  8. centos 7_本地源制作

    1.安装工具 yum install yum-utils createrepo yum-plugin-priorities   2.自己创建一个阿里源 vim /etc/yum.repos.d/ope ...

  9. 设计模式c++(1)

    本来是想把之前的<head first设计模式>看了,不过因为这本书是java实现的,跟c++还是略有区别. 于是找了一下,发现了一个不错的blog,打算连书带blog一起参考着看了. b ...

  10. php之在admin的目录下的php文件里加上JSON的报头,运行php文件会提示下载

    去掉报头就正常,但在前端引用数据时要加上JSON.parse,不然读不出数据. $.get("fetchUpLast.php",{ rd:new Date().getTime()} ...