index.min.js

var a=class extends HTMLElement{static get observedAttributes(){return["party"]}attributeChangedCallback(t,e,i){!this.__initialized||e!==i&&(this[t]=i)}get party(){return this.hasAttribute("party")}set party(t){this.hasAttribute("party")?this.setAttribute("party",""):this.removeAttribute("party"),this.setParty()}constructor(){super();let t=document.createElement("template");t.innerHTML=a.template(),this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(t.content.cloneNode(!0)),this.__element=this.shadowRoot.querySelector(".marquee"),this.__initialized=!1,this.__partifier=null}async connectedCallback(){this.style.width=this.style.width?this.style.width:"100%",this.style.fontFamily=this.style.fontFamily?this.style.fontFamily:"Comic Sans MS",this.hasAttribute("party")&&this.setParty(),this.__initialized=!0}disconnectedCallback(){this.__partifier=null}setParty(){this.hasAttribute("party")?this.__partifier=setInterval(()=>{let e=Math.floor(Math.random()*255),i=Math.floor(Math.random()*255),s=Math.floor(Math.random()*255);this.__element.style.color=`rgb(${e}, ${i}, ${s})`},400):this.__partifier&&(this.__element.style.color="black",clearInterval(this.__partifier))}static template(){return`
      <style>
      .marquee {
        margin: 0 auto;
        white-space: nowrap;
        overflow: hidden;
        box-sizing: border-box;
      }
      
      .marquee span {
        display: inline-block;
        padding-left: 100%;
        animation: marquee 15s linear infinite;
      }
      
      @keyframes marquee {
        0% {
          transform: translate(0, 0);
        }
        100% {
          transform: translate(-100%, 0);
        }
      }
      </style>
      <p class="marquee" style="width: inherit;"><span><slot></slot></span></p>`}};customElements.define("wc-marquee",a);export{a as WCMarquee};