Problems using yew and bevy together

[zhangxichang]

Problem

I use yew to render the web page, and then let bevy look for the canvas tag created by yew to draw, but bevy cannot find the canvas tag created by yew. If I write the canvas tag directly in the index.html file instead of yew, bevy can find the canvas tag and draw it

I'm wondering if it's because yew and bevy start running in the same frame, and yew looks for a non-existent canvas tag before bevy has finished rendering, causing this problem?

Steps To Reproduce
Steps to reproduce the behavior:
1.write the code
2.Execute "trunk serve" to run
3.Browser console error: panicked at 'Cannot find element: #bevy.

Expected behavior
bevy draws graphics in the canvas tag created by yew

Screenshots
Problem code repository:
https://github.com/ZhangXiChang/webapp

Environment:

• Yew version: 0.20.0
• Rust version: 1.72.0
• Target, if relevant: wasm32
• Build tool, if relevant: trunk
• OS, if relevant: windows11
• Browser and version, if relevant: edge 117.0.2045.36

Questionnaire

• I'm interested in fixing this myself but don't know where to start
• I would like to fix and I have a solution
• I don't have time to fix this right now, but maybe later

[zhangxichang]

Is there a way to make bevy run after yew rendering is complete?

[its-the-shrimp]

in your main component you can use use_state(function component) / implement Component::rendered (struct component), both execute code only after rendering the HTML into the DOM.