如何将 Coloris npm 包实现为自定义元素？

Question

我一直在尝试实现一个名为 Coloris 的 NPM，以通过 Web 组件为 Wix 网站提供最终用户颜色自定义功能。据我所知，javascript 不是 working/executing。我已经尝试了一些让 javascript 在 innerHTML 中工作的解决方案，但到目前为止它们还没有奏效。这个问题困扰了我一个星期，我仍然无法将 Coloris 颜色选择器设置为 show/render。我可以获得 HTML/IFrame 嵌入，但需要使其作为自定义组件工作

以下是网络组件的代码。任何 help/solutions 将不胜感激


const createScript = () => {

const scriptElement = document.createElement('script');

scriptElement.src = "https://cdn.jsdelivr.net/gh/mdbassit/Coloris@latest/dist/coloris.min.js";

scriptElement.defer = true;

scriptElement.async = true;

return scriptElement;

}

const template = document.createElement('template');
template.innerHTML = `
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mdbassit/Coloris@latest/dist/coloris.min.css"/>
<script src="https://cdn.jsdelivr.net/gh/mdbassit/Coloris@latest/dist/coloris.min.js"></script>
<input type="text" data-coloris>
`


class ColorisImp extends HTMLElement {
  
  connectedCallback() {

    this.attachShadow({mode: 'open'});
    this.appendChild(createScript());
    this.shadowRoot.appendChild(template.content.cloneNode(true));
   
  
  }
  

  
}

window.customElements.define('coloris-implement', ColorisImp);

Answer 1

我测试过，ColorIs 对 DOM 元素不起作用 inside shadowDOM

您的代码可以更简单；在 document.head

中注入 <script> 和 <link>

注意：ColorIs 在此 SO 代码段中也无法正常工作；
这是一个 JSFiddle：https://jsfiddle.net/WebComponents/5j7h3ygw/

<script>
  window.customElements.define('color-is', class extends HTMLElement {
    connectedCallback() {
      const source = "//cdn.jsdelivr.net/gh/mdbassit/Coloris@latest/dist/";
      if (!document.querySelector(`[src*="${source}"]`)) { // add script once
        const create = (tag, props) =>
          Object.assign(document.createElement(tag), props);
        document.head.append(
          create('script', {
            src: source + "coloris.min.js",
            defer: true,
            async: true
          }),
          create('link', {
            rel: "stylesheet",
            href: source + "coloris.min.css"
          })
        ); //append
      }
      // create Coloris element
      this.innerHTML = `<input type="text" data-coloris>`;
    }
  });
</script>

<color-is></color-is>

Answer 2

我根据丹尼的建议修改了代码


const createScript = () => {

const scriptElement = document.createElement('script');

scriptElement.src = "https://cdn.jsdelivr.net/gh/mdbassit/Coloris@latest/dist/coloris.min.js";

scriptElement.defer = true;

scriptElement.async = true;

return scriptElement;

}

const template = document.createElement('template');
template.innerHTML = `
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mdbassit/Coloris@latest/dist/coloris.min.css"/>
<script src="https://cdn.jsdelivr.net/gh/mdbassit/Coloris@latest/dist/coloris.min.js"></script>
<input type="text" data-coloris>
`


class ColorisImp extends HTMLElement {
  
  connectedCallback() {


var script = document.createElement('script');
script.innerHTML = `<script src="https://cdn.jsdelivr.net/gh/mdbassit/Coloris@latest/dist/coloris.min.js"></script>;`;
document.body.appendChild(script);
    //this.attachShadow({mode: 'open'});
    this.appendChild(createScript());
    this.appendChild(template.content.cloneNode(true));
   
  
  }
  

  
}

window.customElements.define('coloris-implement', ColorisImp);

如何将 Coloris npm 包实现为自定义元素？

How do I implement Coloris npm package as a custom element?

html

javascript

web-component

custom-element

velo