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. Cannot assign requested address问题总结

    Cannot assign requested address问题总结 - 简书 https://www.jianshu.com/p/51a953b789a4 python3 server.pyE07 ...

  2. 为了更好的多线程性能,在对象创建或者更新时,若数据大于2047字节则 Python 的 GIL 会被释放。 执行计算密集型任务如压缩或哈希时释放 GIL

    hashlib - Secure hashes and message digests - Python 3.8.3 documentation https://docs.python.org/3.8 ...

  3. calc, support, media各自的含义及用法?

    @support主要是用于检测浏览器是否支持CSS的某个属性,其实就是条件判断,如果支持某个属性,你可以写一套样式,如果不支持某个属性,你也可以提供另外一套样式作为替补. calc() 函数用于动态计 ...

  4. SparkSQL访问Hive源,MySQL源

    SparkSQL访问Hive源,MySQL源 一.SparkSQL访问Hive源 软件环境 SparkSQL命令行模式可以直接连接Hive的 Java程序SparkSQL连接Hive 二.SparkS ...

  5. 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 模式是扩展正则表达式 ...

  6. docker启动脚本

    #!/bin/bash # 定义环境变量 export LANG="en_US.UTF-8" #统一格式化打印输出信息 printMsg(){ echo "$(date ...

  7. 肝了一个半月的 Java 项目快速开发脚手架:Chewing

    前言 闲来无事,整一个 Java 项目快速开发脚手架. 正文 一.简介 Chewing 是一个简单的 Java 项目快速开发脚手架.既适合需要开发小型项目的小伙伴使用,也适合刚入门的新手用来学习一些常 ...

  8. kafka 通俗

    把broker比作是一幢摩天大楼,一个10节点的kafka集群就是10幢摩天大楼,而且这些大楼都长得一模一样.分区就相当于大楼里的一层.一个分区就相当于一整层哦.原先大楼是空的.现在用户创建了一个to ...

  9. centos 7 部署nginx及libfastcommon

    1.编译环境 (centos)yum install git gcc gcc-c++ make automake autoconf libtool pcre pcre-devel zlib zlib- ...

  10. 【poj 2478】Farey Sequence(数论--欧拉函数 找规律求前缀和)

    题意:定义 Fn 序列表示一串 <1 的分数,分数为最简分数,且分母 ≤n .问该序列的个数.(2≤N≤10^6) 解法:先暴力找规律(代码见屏蔽处),发现 Fn 序列的个数就是 Φ(1)~Φ( ...