Fix UI engineering code samples

The solidus `/>` does not have any special meaning in HTML, and does
not replace an end tag.

This patch fixes the examples by adding explicit end tags where
intended, ensuring that e.g. <devtools-tab-pane> does not get nested
under <devtools-widget> in the first example.

The distinction is critical as it results in a different DOM structure.

Bug: chromium:394001149
Change-Id: I5331103b758693021798adde3e4dbd8c34eb1ff4
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6252743
Auto-Submit: Mathias Bynens <[email protected]>
Reviewed-by: Danil Somsikov <[email protected]>
Commit-Queue: Danil Somsikov <[email protected]>

Author: mathiasbynens

docs/ui_engineering.md

@@ -43,11 +43,11 @@ This will instantiate a `Widget` class with the web component as its `element` a
 ```html
 <devtools-widget .config=${widgetConfig(ElementsPanel)}>
   <devtools-split-widget>
-    <devtools-widget slot="main".config=${widgetConfig(ElementsTree)} />
-    <devtools-tab-pane slot="sidebar" />
-      <devtools-widget .config=${widgetConfig(StylesPane, {element: input.element})} />
-      <devtools-widget .config=${widgetConfig(ComputedPane, {element: input.element})} />
-       ...
+    <devtools-widget slot="main".config=${widgetConfig(ElementsTree)}></devtools-widget>
+    <devtools-tab-pane slot="sidebar">
+      <devtools-widget .config=${widgetConfig(StylesPane, {element: input.element})}></devtools-widget>
+      <devtools-widget .config=${widgetConfig(ComputedPane, {element: input.element})}></devtools-widget>
+      ...
     </devtools-tab-pane>
   </devtools-split-widget>
 </devtools-widget>
@@ -57,11 +57,12 @@ This will instantiate a `Widget` class with the web component as its `element` a
 class StylesPane extends UI.Widget {
   constructor(element, view = (input, output, target) => {
     render(html`
-      <devtools-widget .config=${widgetConfig(MetricsPane, {element: input.element})} />
+      <devtools-widget .config=${widgetConfig(MetricsPane, {element: input.element})}>
+      </devtools-widget>
       <devtools-toolbar>
-        <devtools-filter-input @change=${input.onFilter}/>
-        <devtools-checkbox @change=${input.onShowAll}>Show All<devtools-checkbox>
-        <devtools-checkbox @change=${input.onGroup}>Group<devtools-checkbox>
+        <devtools-filter-input @change=${input.onFilter}></devtools-filter-input>
+        <devtools-checkbox @change=${input.onShowAll}>Show All</devtools-checkbox>
+        <devtools-checkbox @change=${input.onGroup}>Group</devtools-checkbox>
       </devtools-toolbar>
       <devtools-tree-outline>
         ${input.properties.map(p => html`<li>