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

  2. c++ 三五法则 自己理解

    简介 三五法则规定了什么时候需要  1 拷贝构造函数   2 拷贝赋值函数  3 析构函数 1. 需要析构函数的类也需要拷贝构造函数和拷贝赋值函数. 通常,若一个类需要析构函数,则代表其合成的析构函数 ...

  3. jQuery——操作DOM

    所谓Web体验,就是Web服务器与Web浏览器之间的合作.过去,都是由服务器生成HTML文档,然后浏览器负责解释并显示该文档.后来,我们可以用CSS技术来动态修改页面的外观. ###操作属性 jQue ...

  4. linux环境变量 shell变量 command not found解决方法(转)

    在Ubuntu.centos中有如下几个文件可以设置环境变量1./etc/profile:在登录时,操作系统定制用户环境时使用的第一个文件,此文件为系统的每个用户设置环境信息,当用户第一次登录时,该文 ...

  5. 读取EXCEL文档解析工具类

    package test;import java.io.File;import java.io.FileInputStream;import java.io.FileNotFoundException ...

  6. FatMouse and CheeseI - I

    FatMouse has stored some cheese in a city. The city can be considered as a square grid of dimension ...

  7. HDU 3449 依赖背包

    这道题虽然水水的,但是还是成功地给我增加了10多个WA. 最开始拿着题,一看,依赖背包嘛~直接DFS树形DP嗨起来,甚至连内存都没有算一下,3MLE: 然后又仔细看了一下题,没有必要用树形背包来做嘛, ...

  8. HDOJ 2955

    这道背包题和我们常见的背包题有所不同.如果根据以前做背包的惯性思维和题中数据的迷惑,会把概率乘以100来当作容量.但是经测试是不行的. 我们不妨换种思路,看做DAG上的DP思想.将所有有可能达到的钱的 ...

  9. 【noi 2.6_9268】酒鬼(DP)

    题意:有N瓶酒,不能连续喝>=3瓶的酒,问能喝的最大的酒量. 解法:同前一题相似,可以f[i][j]表示前i瓶中连续喝了j瓶的最大酒量.1.f[i][0]=f[i-1][3] ; 2.i=1或2 ...

  10. poj3260 The Fewest Coins

    Description Farmer John has gone to town to buy some farm supplies. Being a very efficient man, he a ...