Web组件
#javascript #react #Web组件 #pride

在他的博客序列Pride Flags中，Josh Comeau在制作动画骄傲的标志上做得很好。

  • 他创造了良好的html
  • 他添加了很酷的CSS梯度
  • 他写作本地 javascript
  • 然后，将骄傲旗放在DOM中， 用这条线破坏了这一切：

他只有三行 创建本机JavaScript web组件<pride-flag>，它将在每个框架中，在每个现代浏览器中运行，不用！ 任何依赖项 

customElements.define("pride-flag", class extends HTMLElement {
  connectedCallback(){
    this.innerHTML = PrideFlag();
  }
});

所有信用乔什，我对他的代码进行了一些重构，所以https://pride-flag.github.io提供了本机JavaScript Web组件<pride-flag>

来源：https://github.com/pride-flag/pride-flag.github.io

用：
扩展<pride-flag>本身 

customElements.define('pride-pan-flag', 
  class extends customElements.get('pride-flag') {
    connectedCallback() {
        super.connectedCallback([[331, 100, 55], [50, 100, 50], [200, 100, 55]]);
    }
});
customElements.define('pride-trans-flag', 
  class extends customElements.get('pride-flag') {
    connectedCallback() {
        super.connectedCallback([[200, 85, 70], [350, 85, 85], [0, 0, 100], [350, 85, 85], [200, 85, 70]]);
    }
});

增加了2个Web组件。

所有必需的html： 

<script src="https://pride-flag.github.io/element.js"></script>

<style>
  flags {display:grid; grid: 1fr/1fr 1fr 1fr; gap:1em}
</style>

<flags>
  <pride-flag columns="10">
      </pride-flag>
  <pride-pan-flag columns="100" delay="20" billow="1">
      </pride-pan-flag>
  <pride-trans-flag columns="200" delay="20" speed="1700" billow="2">
      </pride-trans-flag>
</flags>

创建：

标志配置器在：https://pride-flag.github.io