From a55b575e8089ee6cab7c5c262a7e6db55d0e34d6 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:46:50 +0100 Subject: unslug es: move --- files/es/web/html/element/shadow/index.html | 152 ++++++++++++++++++++++++++++ 1 file changed, 152 insertions(+) create mode 100644 files/es/web/html/element/shadow/index.html (limited to 'files/es/web/html/element/shadow') diff --git a/files/es/web/html/element/shadow/index.html b/files/es/web/html/element/shadow/index.html new file mode 100644 index 0000000000..bd3cc37616 --- /dev/null +++ b/files/es/web/html/element/shadow/index.html @@ -0,0 +1,152 @@ +--- +title: +slug: Web/HTML/Elemento/Shadow +translation_of: Web/HTML/Element/shadow +--- +

{{obsolete_header}}

+ +

El HTML <shadow> element—es una parte absoluta de la suite tecnológica de Web Components —estaba destinado a ser utilizado como un shadow DOM {{glossary("insertion point")}}. Es posible que lo hayas usado si has creado varias root shadow bajo un shadow host. No es útil en HTML ordinario.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Content categoriesTransparent content.
Permitted contentFlow content.
Tag omission{{no_tag_omission}}
Permitted parentsAny element that accepts flow content.
Permitted ARIA rolesNone
DOM interface{{domxref("HTMLShadowElement")}}
+ +

Attributes

+ +

This element includes the global attributes.

+ +

Example

+ +

Aquí está un ejemplo simple usando el  <shadow> element. Es un archivo HTML con todo lo necesario en él.

+ +
+

Note: This is an experimental technology. For this code to work, the browser you display it in must support Web Components. See Enabling Web Components in Firefox.

+
+ +
<html>
+  <head></head>
+  <body>
+
+  <!-- This <div> will hold the shadow roots. -->
+  <div>
+    <!-- This heading will not be displayed -->
+    <h4>My Original Heading</h4>
+  </div>
+
+  <script>
+    // Get the <div> above with its content
+    var origContent = document.querySelector('div');
+    // Create the first shadow root
+    var shadowroot1 = origContent.createShadowRoot();
+    // Create the second shadow root
+    var shadowroot2 = origContent.createShadowRoot();
+
+    // Insert something into the older shadow root
+    shadowroot1.innerHTML =
+      '<p>Older shadow root inserted by
+          &lt;shadow&gt;</p>';
+    // Insert into younger shadow root, including <shadow>.
+    // The previous markup will not be displayed unless
+    // <shadow> is used below.
+    shadowroot2.innerHTML =
+      '<shadow></shadow> <p>Younger shadow
+       root, displayed because it is the youngest.</p>';
+  </script>
+
+  </body>
+</html>
+
+ +

If you display this in a web browser it should look like the following.

+ +

shadow example

+ +

Specifications

+ +

This element is no longer defined by any specifications.

+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support35{{CompatGeckoDesktop("28")}}[1]{{CompatNo}}26{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support37{{CompatGeckoMobile("28")}}[1]{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] If Shadow DOM is not enabled in Firefox, <shadow> elements will behave like {{domxref("HTMLUnknownElement")}}. Shadow DOM was first implemented in Firefox 33 and is behind a preference, dom.webcomponents.enabled, which is disabled by default.

+ +

See also

+ + + +
{{HTMLRef}}
-- cgit v1.2.3-54-g00ecf