<!-- web components(trump component) -->
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="author" content="xgqfrms">
  <meta name="generator" content="VS code">
  <title>web components</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
  </style>
<!--   <link rel="stylesheet" href="./index.css"> -->
</head>
<body>
  <header>
    <h1>web components</h1>
  </header>
  <main>
    <article>
      <section>
        <!-- TrumpComponent -->
        <trump-component>1</trump-component>
<!--         <trump-component>2</trump-component> -->
        <!-- <TrumpComponent>3</TrumpComponent> -->
        <div class="run-class"></div>
      </section>
    </article>
  </main>
  <footer>
    <p>copyright&copy; xgqfrms 2020</p>
  </footer>
  <!-- js -->
  <script>
    // const log = console.log;
  </script>
<!--   <script src="./app.js"></script> -->
</body>
</html>

/*

.run-class {
    width: 300px;
    height: 300px;
    background: url(https://www.boston.com/wp-content/uploads/2016/05/yuge_anger.png) 0 0;
    background-repeat: no-repeat;
    animation: run 500ms steps(6) infinite;
  }
  @keyframes run {
    from {
      background-position: 0 0;
    }
    to {
      background-position: -600px 0;
    }
  }

*/

/*

object-fit: fill;

object-fit: contain;

object-fit: cover;

object-fit: fill|contain|cover|scale-down|none|initial|inherit;


*/

trump-component{
  max-width: 200px !important;
  max-height: 200px !important;
  overflow: auto;
}


  /* steps !== step */
  /* 500ms !== 500 */
View Compiled 
"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 * @created 2020-09-01
 * @modified
 *
 * @description web components
 * @difficulty Easy Medium Hard
 * @complexity O(n)
 * @augments
 * @example
 * @link
 * @solutions
 *
 */

const log = console.log;

class TrumpComponent extends HTMLElement{
  constructor() {
    super();
    // 立即执行
    log(`init`);
    this.init();
  }
  init() {
    log(`💩 trump is running`);
    // shadow root
    const shadow = this.attachShadow({
      mode: "open",
    });
    const wrapper = document.createElement(`div`);
    wrapper.setAttribute(`class`, `run`);
    const style = document.createElement(`style`);
    style.textContent = `
      .run {
        min-width: 100px;
        min-height: 100px;
        width: 512px;
        height: 512px;
        border: 1px solid red;
        background: url(https://www.boston.com/wp-content/uploads/2016/05/yuge_anger.png) 0 0;
        background-repeat: no-repeat;
        object-fit: contain;
        animation: run 500ms steps(7) infinite;
      }
      @keyframes run {
        from {
          background-position: 600px 0;
        }
        to {
          background-position: -600px 0;
        }
      }
    `;
    shadow.appendChild(style);
    shadow.appendChild(wrapper);
    // 添加样式到 Shadow DOM （template）
    // if (window.ShadyCSS) window.ShadyCSS.prepareTemplate(template, tagName);
  }
}

customElements.define(`trump-component`, TrumpComponent);


// export default TrumpComponent;

// export {
//   TrumpComponent,
// };



/*

https://www.base64-image.de/


trump emoji

trump keyframes animation

https://www.boston.com/wp-content/uploads/2016/05/yuge_anger.png

https://www.boston.com/culture/entertainment/2016/05/12/can-now-send-donald-trump-emojis-thanks-ship-snow-yo-man

*/

/*


style.textContent  !== style.setContent , innerHTML

https://www.youtube.com/watch?v=0QLHEOVnYtY&ab_channel=%E5%B0%9A%E7%A1%85%E8%B0%B7IT%E5%9F%B9%E8%AE%AD%E5%AD%A6%E6%A0%A1

*/

/*

css & object-fit & background-image

contain;

https://www.cnblogs.com/xgqfrms/p/13096844.html


*/

  /* steps !== step */
  /* 500ms !== 500 */
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.