zoukankan      html  css  js  c++  java
  • xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

    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);
           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

    https://caniuse.com/#search=html templates

    https://caniuse.com/#search=customElements

    web components

    https://caniuse.com/#search=web components


    Flag Counter

    ©xgqfrms 2012-2020

    www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!


  • 相关阅读:
    python排序
    JavaMail转发邮件
    Java发送邮件Demo
    字符编码
    常用的python内建函数
    mysql-python安装
    ubuntu安装flash
    grep简介
    【java中的static关键字】
    【java中的final关键字】
  • 原文地址:https://www.cnblogs.com/xgqfrms/p/13255272.html
Copyright © 2011-2022 走看看