On Web, add WindowBuilderExtWebSys::with_append() (#2953)

examples/web.rs

@@ -10,10 +10,13 @@ use winit::{
 pub fn main() {
     let event_loop = EventLoop::new();
 
-    let window = WindowBuilder::new()
-        .with_title("A fantastic window!")
-        .build(&event_loop)
-        .unwrap();
+    let builder = WindowBuilder::new().with_title("A fantastic window!");
+    #[cfg(wasm_platform)]
+    let builder = {
+        use winit::platform::web::WindowBuilderExtWebSys;
+        builder.with_append(true)
+    };
+    let window = builder.build(&event_loop).unwrap();
 
     #[cfg(wasm_platform)]
     let log_list = wasm::insert_canvas_and_create_log_list(&window);
@@ -96,7 +99,6 @@ mod wasm {
         // Use to test interactions with border and padding.
         //style.set_property("border", "50px solid black").unwrap();
         //style.set_property("padding", "50px").unwrap();
-        body.append_child(&canvas).unwrap();
 
         let log_header = document.create_element("h2").unwrap();
         log_header.set_text_content(Some("Event Log"));

examples/web_aspect_ratio.rs

@@ -13,6 +13,7 @@ mod wasm {
         dpi::PhysicalSize,
         event::{Event, WindowEvent},
         event_loop::{ControlFlow, EventLoop},
+        platform::web::WindowBuilderExtWebSys,
         window::{Window, WindowBuilder},
     };
 
@@ -37,6 +38,7 @@ This example demonstrates the desired future functionality which will possibly b
             // When running in a non-wasm environment this would set the window size to 100x100.
             // However in this example it just sets a default initial size of 100x100 that is immediately overwritten due to the layout + styling of the page.
             .with_inner_size(PhysicalSize::new(100, 100))
+            .with_append(true)
             .build(&event_loop)
             .unwrap();
 
@@ -72,7 +74,6 @@ This example demonstrates the desired future functionality which will possibly b
         canvas
             .style()
             .set_css_text("display: block; background-color: crimson; margin: auto; width: 50%; aspect-ratio: 4 / 1;");
-        body.append_child(&canvas).unwrap();
 
         let explanation = document.create_element("pre").unwrap();
         explanation.set_text_content(Some(EXPLANATION));