Changing poster doesnt work

[phovorka]

Target: change a poster image after button click.
Problem: poster image doesnt change ....
Demo: simple example
https://glitch.com/edit/#!/mvproblem?path=script.js%3A2%3A0
https://mvproblem.glitch.me/

Code:

  const modelViewer = document.querySelector("model-viewer");

  let btn1 = document.querySelector("#btn1");
  btn1.addEventListener("click", () => {
    modelViewer.src = "https://modelviewer.dev/assets/ShopifyModels/Chair.glb";
    modelViewer.poster ="https://modelviewer.dev/assets/ShopifyModels/Chair.webp";
  });
  
  let btn2 = document.querySelector("#btn2");
  btn2.addEventListener("click", () => {
    modelViewer.src = "https://modelviewer.dev/assets/ShopifyModels/Mixer.glb";
    modelViewer.poster ="https://modelviewer.dev/assets/ShopifyModels/Mixer.webp";
  });

  let loadBtn = document.querySelector("#button-load");
  loadBtn.addEventListener("click", () =>{
    modelViewer.dismissPoster();           
  });

[elalish]

The problem is you're using a custom poster, but trying to configure the default poster, which you replaced with your slot. Also you have two different elements in the same slot? No idea what that'll do, but probably nothing good.

[phovorka]

• changing slot name didnt help....
• by removing .....

<div id="lazy-load-poster" slot="poster"></div>
  <div id="button-load" slot="poster">Load 3D Model</div>

poster change works , but with this i am losing the posibility of own "load button" ?! strange...

[elalish]

I think you should look up a tutorial on web components, slots, etc. Then you'll have a better grounding on what to expect here.

[phovorka]

thanks for advice but i dont see there anything what could solve my target "Target: change a poster image after button click."
I think this is a fair functionality to be required, isnt? shall i write ticket for Bug?

[elalish]

No, because this is very much possible. If you don't use the poster slot, it'll work basically as is. If you do use the poster slot, you can change your own slotted image rather than poster. And your load button doesn't need to be in the poster slot to work.