HTML page has non-empty title [2779a5]: Shadow root example - Included as failed example 6 (#2180)

giacomo-petri · WilcoFiers · Jym77 · web-flow · commit d77d6fced330 · 2024-09-30T16:20:53.000+02:00
* Shadow root example included as failed example 6

* Update _rules/html-page-non-empty-title-2779a5.md

Co-authored-by: Wilco Fiers &lt;WilcoFiers@users.noreply.github.com&gt;

---------

Co-authored-by: Wilco Fiers &lt;WilcoFiers@users.noreply.github.com&gt;
Co-authored-by: Jean-Yves Moyen &lt;jym@siteimprove.com&gt;
diff --git a/_rules/html-page-non-empty-title-2779a5.md b/_rules/html-page-non-empty-title-2779a5.md
@@ -202,6 +202,27 @@ This page has a `title` element that only contains a separator character.
 </html>
 ```
 
+#### Failed Example 6
+
+This page does not have a title because the shadow root is not a [descendant](https://dom.spec.whatwg.org/#concept-tree-descendant) of the [document element](https://dom.spec.whatwg.org/#document-element).
+
+```html
+<html>
+	<body>
+		<template id="shadow-element">
+			<title>This is the page title</title>
+		</template>
+		<script>
+      			const host = document.querySelector("body");
+      			const shadow = host.attachShadow({ mode: "open" });
+      			const template = document.getElementById("shadow-element");
+
+      			shadow.appendChild(template.content);
+    		</script>
+	</body>
+</html>
+```
+
 ### Inapplicable
 
 #### Inapplicable Example 1
