Where to put native dom acess ?

[LifeIsStrange]

Description

**I'm submitting a question

Question - Where to put for example a getElmentbyId()? (via stdweb)

Description: I'm currently using yew master with proc macro enabled.
I added a canvas element.

If I get the canvas via un query selector of canvas ID, at the end of the main so after the yew application, it works well, but it's not integrated in the yew app.

if I put the stdweb canvas code in update() of the model the first rendering do not show the canvas square but still show the app, then the square appear after an update (onclick) which is logic.
But I would like to have my canvas rendered without any update too, so I remove it from update and put it at the end of create, but then when i load the app, nothing show not the canvas nor the "app" and the devtools console panic.
Why doesn't this work ? and what can I do to integrate canvas in yew ?

Actual Results

not working

Context (Environment)

• Rust: v1.36 nightly

• yew master (out of date from 2 days ~) with proc_macro

• target: cargo web start with no additional flag

• cargo-web 0.6.25

• chrome 75 stable

here's a reduced test case:
where to put the canvas code ?

extern crate stdweb;
extern crate yew;
use stdweb::traits::*;
use stdweb::unstable::TryInto;
use stdweb::web::event::{MouseMoveEvent, ResizeEvent};
use stdweb::web::html_element::CanvasElement;
use stdweb::web::{document, window, CanvasRenderingContext2d};
use yew::prelude::*;

struct Model {
    value: i64,
}

enum Msg {
    DoIt,
}

impl Component for Model {
    type Message = Msg;
    type Properties = ();
    fn create(_: Self::Properties, _: ComponentLink<Self>) -> Self {
        Self { value: 0 }
    }

    fn update(&mut self, msg: Self::Message) -> ShouldRender {
        if self.value == 10 {
            self.value = 0;
        }
        match msg {
            Msg::DoIt => self.value = self.value + 1,
        }
        true
    }
}

impl Renderable<Model> for Model {
    fn view(&self) -> Html<Self> {
        html! {
            <div>
               <canvas id="canvas" width="200" height="100" style="border:1px solid #d3d3d3;"></canvas>
               <button onclick=|_| Msg::DoIt,>{ "+1" }</button>
                <p>{ self.value }</p>
            </div>
        }
    }
}

fn main() {
    stdweb::initialize();
    yew::initialize();
    App::<Model>::new().mount_to_body();
    *********************************************
let canvas: CanvasElement = document()
        .query_selector("#canvas")
        .unwrap()
        .unwrap()
        .try_into()
        .unwrap();
    let context: CanvasRenderingContext2d = canvas.get_context().unwrap();

    context.fill_rect(25.0, 25.0, 100.0, 100.0);
    context.clear_rect(45.0, 45.0, 60.0, 60.0);
    context.stroke_rect(50.0, 50.0, 50.0, 50.0);
*************************************************************
    yew::run_loop();
}

note: i had the same issue on the todomvc example

[nicolidin]

I agree with LifeIsStrange, I think we both need an equivalent to componentDidMount() method in React framework which would allow us to query the DOM after component creation.
cf: https://reactjs.org/docs/react-component.html#componentdidmount

[jstarry]

Mount method sounds great, refs would be nice too, eh? https://reactjs.org/docs/refs-and-the-dom.html

[jstarry]

I think this can be closed now that mount has been added to the 0.9 release. We will also be implementing something like #616 or #665 for better element querying