From 754bbf7a25a8dda49b5d08ef0d0443bbf5af0e36 Mon Sep 17 00:00:00 2001 From: Craig Jennings Date: Sun, 7 Apr 2024 13:41:34 -0500 Subject: new repository --- devdocs/html/element%2Fslot.html | 128 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 128 insertions(+) create mode 100644 devdocs/html/element%2Fslot.html (limited to 'devdocs/html/element%2Fslot.html') diff --git a/devdocs/html/element%2Fslot.html b/devdocs/html/element%2Fslot.html new file mode 100644 index 00000000..e7b67e7a --- /dev/null +++ b/devdocs/html/element%2Fslot.html @@ -0,0 +1,128 @@ +

<slot>: The Web Component Slot element

The <slot> HTML element—part of the Web Components technology suite—is a placeholder inside a web component that you can fill with your own markup, which lets you create separate DOM trees and present them together.

+

Attributes

+
+

This element includes the global attributes.

name

The slot's name.

A named slot is a <slot> element with a name attribute.

+
+

Examples

+
+
+

html

+
<template id="element-details-template">
+  <style>
+    details {
+      font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
+    }
+    .name {
+      font-weight: bold;
+      color: #217ac0;
+      font-size: 120%;
+    }
+    h4 {
+      margin: 10px 0 -8px 0;
+      background: #217ac0;
+      color: white;
+      padding: 2px 6px;
+      border: 1px solid #cee9f9;
+      border-radius: 4px;
+    }
+    .attributes {
+      margin-left: 22px;
+      font-size: 90%;
+    }
+    .attributes p {
+      margin-left: 16px;
+      font-style: italic;
+    }
+  </style>
+  <details>
+    <summary>
+      <code class="name">
+        &lt;<slot name="element-name">NEED NAME</slot>&gt;
+      </code>
+      <span class="desc"><slot name="description">NEED DESCRIPTION</slot></span>
+    </summary>
+    <div class="attributes">
+      <h4>Attributes</h4>
+      <slot name="attributes"><p>None</p></slot>
+    </div>
+  </details>
+  <hr />
+</template>
+
+

Note: You can see this complete example in action at element-details (see it running live). In addition, you can find an explanation at Using templates and slots.

+
+

Technical summary

+
Content categories Flow content, phrasing content
Permitted content Transparent
Events slotchange
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts phrasing content
Implicit ARIA role No corresponding role
Permitted ARIA roles No role permitted
DOM interface HTMLSlotElement
+

Specifications

+
+ + + + + +
Specification
HTML Standard
# the-slot-element
DOM Standard
# shadow-tree-slots
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
slot537963No401053536341106.0
name537963No401053536341106.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot +

+
-- cgit v1.2.3