how to change background via custom element

Ask the community
,
1

Is there any way how to change page background via custom element ? custom element is working fine ,here is the code snippet :
$w( ‘Document’ ).background.src =$w( ‘#CustomElement1’ ).show()
I know that code will not work , according to documentation src supports url , but any other way custom element will be displayed as a background of the page .
Thanks in Advance …

2

You can use a custom element to set the page background
(but on live sites only. Not in preview mode).

3

Let’s say for example that you want to change the background color.
Then you can do something like:

//custom elementcode 
let elementsToColor = [document.querySelector("body"), document.querySelector("main"), document.querySelector("header"), document.querySelector("footer")];
function setColor(color){
elementsToColor.forEach(e => e.style["background-color"] = color);
}
class Background extends HTMLElement {
    connectedCallback() {
        this.style.display = "none";
}
static get observedAttributes() {return ["background"];}
attributeChangedCallback(name, oldValue, newValue) {
  return setColor(newValue);
}

}
customElements.define('bg-color', Background);

And on the page:

export function input1_change(event) {
	$w("#CustomElement1").setAttribute("background", $w("#input1").value);
}