Web components and JS functions-CodePudding

I'm working on a web component and have a trouble hooking up JS function that randomizes colors. What I have achieved so far is different styles for global DOM and shadow DOM <h3> element (sentence 1, and sentence 2 repsectively). What I need is the shadow DOM <h3> element to be applied random colors from the array that sits in changeColor() function. Any ideas on how I can incorporate the function into the shadow DOM?

const template = document.createElement('template');
template.innerHTML = `
    <style>
        h3 {
            color: coral;
        }
    </style>
    <h3>Sentence 2 </h3>
`;
class UserCard extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({mode: 'open'});
        this.shadowRoot.appendChild(template.content.cloneNode(true));
    }
};

window.customElements.define('user-card', UserCard);


function changeColor() {
    let num = 0;
    let arr = ['#FFD640;', '#fdff76', '#f0cd59', '#fa9624', '#fa6824', '#a33f11'];
    window.setInterval(function () {
        num = (num   1) % 4;
        document.querySelector('h3').style.color = arr[Math.floor(Math.random() * arr.length)]; 
    }, 1000);
}

    <!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Web Components Example</title>
    </head>
    <body>
        <h3>Sentence 1</h3>
        <user-card>
            <script src="userCard.js"></script>
        </user-card> 
    </body>
</html>

CodePudding user response：

Define the colors in the class as a property. Create a function or a getter for retrieving the h3 element from the Shadow DOM for easy access.

Custom Elements have lifecycles, meaning that it has certain methods that will be called at certain points in time depending on the context. connectedCallback will be called when the element is placed inside the main DOM and will ensure that your component is rendered and ready. In there call your setInterval logic. Change the function() declaration to an arrow function () => to ensure that the this keyword points at the component.

const template = document.createElement('template');
template.innerHTML = `
    <style>
        h3 {
            color: coral;
        }
    </style>
    <h3>Sentence 2</h3>
`;

class UserCard extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({
      mode: 'open'
    });
    this.shadowRoot.appendChild(template.content.cloneNode(true));
  }
  
  colors = ['#FFD640', '#fdff76', '#f0cd59', '#fa9624', '#fa6824', '#a33f11'];

  get heading() {
    return this.shadowRoot.querySelector('h3');
  }

  connectedCallback() {
    window.setInterval(() => {
      this.heading.style.color = this.colors[Math.floor(Math.random() * this.colors.length)];
    }, 1000);
  }
};

window.customElements.define('user-card', UserCard);

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Web Components Example</title>
</head>

<body>
  <h3>Sentence 1</h3>
  <user-card></user-card>
  <script src="userCard.js"></script>
</body>

</html>

CodePudding user response：

Thanx for your input, guys! It has eventually worked out this way as well:

const template = document.createElement('template');
template.innerHTML = `
    <style>
        h3 {
            color: coral;
        }
    </style>
    <h3>Sentence 2 </h3>
`;
class UserCard extends HTMLElement {
    
    constructor() {
        super();
        this.attachShadow({mode: 'open'});
        this.shadowRoot.appendChild(template.content.cloneNode(true));
        let arr = ['#FFD640;', '#fdff76', '#f0cd59', '#fa9624', '#fa6824', '#a33f11'];
        let num = 0;
        this.changeColor = setInterval(() => {
            num = (num   1) % 4;
            this.shadowRoot.querySelector('h3').style.color = arr[Math.floor(Math.random() * arr.length)];
        }, 1000);
        this.changeColor();
        
    }
};

window.customElements.define('user-card', UserCard);