I have a custom element that I'm using to get color input values in Wix. Currently, I have trouble getting a value from outside of the custom element to show in the custom element. For example, I want to make it so that when a user clicks on a button on my page, the custom element input value is updated. I've tried consulting the wix manual for custom elements, but nothing seems to get the value updated.
//basic-input.js
const template = document.createElement('template');
template.innerHTML = `
<!DOCTYPE html>
<html>
<body>
<label for="ucolor">User Color Choice:</label>
<input type="text" id="ucolor" name="ucolor" value = "802140"><br><br>
</body>
</html>
`;
class BasicInput extends HTMLElement {
connectedCallback() {
this.appendChild(template.content.cloneNode(true));
}
}
window.customElements.define('basic-input', BasicInput);
Button Code
export function button124_click(event) {
console.log($w("#basicInputCustomElement").setAttribute("input","value"))
}
And the Custom Element settings in Wix: Custom Element Attribute settings in Wix
