I have been trying to implement an NPM called Coloris , to provide end-user color customization capability to a Wix website through a web component. From what I can see, the javascript isn't working/executing. I've tried a few solutions for getting javascript to work in innerHTML, but they haven't worked so far. This issue has stumped me for a week and I still can't get the Coloris color picker to show/render. I can get as an HTML/IFrame embed, but need to make it work as a custom component
Below is the code for the web component. Any help/solutions would be greatly appreaciated
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);
I tested it, ColorIs does not work on DOM Elements inside shadowDOM
Your code can be made easier; to inject the <script>
and <link>
in the document.head
Note: ColorIs does not work properly in this SO snippet either;
here is a 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>
I changed up the code with the suggestion by Danny
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);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.