Using window.onresize and document.querySelector is unsafe

[smalluban]

Question

It's not a bug, so I've chosen the "question" template. I looked at the source code, and I've found some worrying parts:

webcomponent-instagram-widget/webcomponent/js/main.js

Line 60 in 245e8c3

document.querySelector("instagram-widget").shadowRoot.querySelector(".instagram-widget-photos").innerHTML = html;

Your code won't work if there will be more elements on the same page. It will always update the first one. You can just reference your element by this - so instead querying document to access shadowRoot, you can use this.shadowRoot (after initializing it).

webcomponent-instagram-widget/webcomponent/js/main.js

Line 110 in 245e8c3

window.onresize = () => {

This is unsafe and can break other code. You assume that the user won't use window.onresize syntax, but he can, and then your callback is gone. You should use window.addEventListener().

webcomponent-instagram-widget/webcomponent/js/main.js

Line 113 in 245e8c3

if (self.options["force-square"] === "yes") {

Because of that, the onresize will only refer to the last instance of your component, so the above setting will apply from the last instance.

[ptkdev]

Nice feedback! Thanks!
This is my first component so it's not perfect. Pull request is welcome! It is not expected to fill a page with this component, it should be 1 per page so I didn't get this problem.

I will try to solve the problem with v2.5.0

[ptkdev]

@smalluban Thank's bro. I added you to README.md as a contributor. Fix available in v2.5.0