Allow to replace an element instead of append to body for web rendering

winit/src/application.rs

@@ -137,6 +137,9 @@ where
         runtime.enter(|| A::new(flags))
     };
 
+    #[cfg(target_arch = "wasm32")]
+    let target = settings.window.platform_specific.target.clone();
+
     let builder = settings.window.into_builder(
         &application.title(),
         event_loop.primary_monitor(),
@@ -159,9 +162,20 @@ where
         let document = window.document().unwrap();
         let body = document.body().unwrap();
 
-        let _ = body
-            .append_child(&canvas)
-            .expect("Append canvas to HTML body");
+        let target = target.and_then(|target| {
+            body.query_selector(&format!("#{}", target))
+                .ok()
+                .unwrap_or(None)
+        });
+
+        let _ = match target {
+            Some(node) => node
+                .replace_child(&canvas, &node)
+                .expect(&format!("Could not replace #{}", node.id())),
+            None => body
+                .append_child(&canvas)
+                .expect("Append canvas to HTML body"),
+        };
     }
 
     let (compositor, renderer) = C::new(compositor_settings, Some(&window))?;

winit/src/settings.rs

@@ -7,7 +7,15 @@ mod platform;
 #[path = "settings/macos.rs"]
 mod platform;
 
-#[cfg(not(any(target_os = "windows", target_os = "macos")))]
+#[cfg(target_arch = "wasm32")]
+#[path = "settings/wasm.rs"]
+mod platform;
+
+#[cfg(not(any(
+    target_os = "windows",
+    target_os = "macos",
+    target_arch = "wasm32"
+)))]
 #[path = "settings/other.rs"]
 mod platform;
 
@@ -27,7 +35,7 @@ pub struct Settings<Flags> {
     /// communicate with it through the windowing system.
     pub id: Option<String>,
 
-    /// The [`Window`] settings
+    /// The [`Window`] settings.
     pub window: Window,
 
     /// The data needed to initialize an [`Application`].

winit/src/settings/macos.rs

@@ -1,4 +1,3 @@
-#![cfg(target_os = "macos")]
 //! Platform specific settings for macOS.
 
 /// The platform specific window settings of an application.

winit/src/settings/wasm.rs

@@ -0,0 +1,11 @@
+//! Platform specific settings for WebAssembly.
+
+/// The platform specific window settings of an application.
+#[derive(Debug, Clone, PartialEq, Eq, Default)]
+pub struct PlatformSpecific {
+    /// The identifier of a DOM element that will be replaced with the
+    /// application.
+    ///
+    /// If set to `None`, the application will be appended to the HTML body.
+    pub target: Option<String>,
+}

winit/src/settings/windows.rs

@@ -1,4 +1,3 @@
-#![cfg(target_os = "windows")]
 //! Platform specific settings for Windows.
 
 /// The platform specific window settings of an application.