Web components and JS functions

Question

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>

Could you please edit the post and show an example of how you want to use the changeColor function? It sounds as if you want changeColor as an additional method inside the class body. If you then change the setTimeout callback to an arrow function, change document.querySelector('h3') to this.shadowRoot.querySelector('h3'), and, inside the constructor, call this.changeColor();, is this what you want the code to do? — Sebastian Simon
– Sebastian Simon, Commented Sep 30, 2021 at 17:20
What I did so far was adding, arr=[...] and this.shadowRoot.querySelector('h3').style.color = arr[Math.floor(Math.random() * arr.length)]; right into the constructor, but it didn't give me any automation in terms of colors. I still have to manually reload the page to change the color — Андрей Романов
– Андрей Романов, Commented Sep 30, 2021 at 17:28
On StackOverflow, you are required to manage your questions' lifecycle. That means, that if you get answers, and they solve your problem, pick the answer that answers it best. If not, comment on the answers given and explain why these do not help you solve your problem. — connexo
– connexo, Commented Oct 10, 2021 at 14:37

Emiel Zuurbier · Accepted Answer · 2021-09-30 19:53:09Z

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>

connexo · Accepted Answer · 2021-10-01 08:11:30Z

Another option would be to pass the context for the querySelector to changeColor, with document as the default if no context gets passed. This way changeColor becomes more flexible while also retaining backwards compatibility.

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));
        changeColor(this.shadowRoot);
    }
};

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


function changeColor(context = document) {
    let num = 0;
    let arr = ['#FFD640;', '#fdff76', '#f0cd59', '#fa9624', '#fa6824', '#a33f11'];
    window.setInterval(function () {
        num = (num + 1) % 4;
        context.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>

Danny '365CSI' Engelman · Accepted Answer · 2021-10-01 09:50:35Z

I would shorten it to:

customElements.define('user-card', class extends HTMLElement {
  constructor() {
    super().attachShadow({mode:"open"})
           .innerHTML = "<style>h3{color:coral}</style><h3>Sentence 2 </h3>";
    let arr = ['#FFD640;', '#fdff76', '#f0cd59', '#fa9624', '#fa6824', '#a33f11'];
    setInterval(() => {
      let newColor = arr[Math.floor(Math.random() * arr.length)];
      this.shadowRoot.querySelector('h3').style.color = newColor;
    }, 100);
  }
});

<user-card></user-card>

Separate class definition only required when you need to use it multiple times
super sets AND returns the 'this' scope, so you can chain on it
attachShadow sets AND returns this.shadowRoot, so you can chain on it
<templates> only make sense for more complex HTML, use .innerHTML for the easy stuff
You are storing the ID reference of setInterval in this.changeColor (required if you want to end the loop) But then you are calling it as a function... see: https://developer.mozilla.org/en-US/docs/Web/API/setInterval

Андрей Романов · Accepted Answer · 2021-10-01 04:34:07Z

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);

Collectives™ on Stack Overflow

Web components and JS functions

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related