diff options
author | Peter Bengtsson <mail@peterbe.com> | 2021-07-15 12:59:34 -0400 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-07-15 12:59:34 -0400 |
commit | 3601b7bb982e958927e069715cfe07430bce7196 (patch) | |
tree | d305ecdbf80ce8126386a0d7886f70d915277c7c /files/es/web/api/element | |
parent | 9ace67d06f2369e3c770e3a11e06e1c8cc9f66fd (diff) | |
download | translated-content-3601b7bb982e958927e069715cfe07430bce7196.tar.gz translated-content-3601b7bb982e958927e069715cfe07430bce7196.tar.bz2 translated-content-3601b7bb982e958927e069715cfe07430bce7196.zip |
delete pages that were never translated from en-US (es, part 1) (#1547)
Diffstat (limited to 'files/es/web/api/element')
-rw-r--r-- | files/es/web/api/element/shadowroot/index.html | 83 |
1 files changed, 0 insertions, 83 deletions
diff --git a/files/es/web/api/element/shadowroot/index.html b/files/es/web/api/element/shadowroot/index.html deleted file mode 100644 index 17af57bb3c..0000000000 --- a/files/es/web/api/element/shadowroot/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: Element.shadowRoot -slug: Web/API/Element/shadowRoot -translation_of: Web/API/Element/shadowRoot ---- -<div>{{APIRef("Shadow DOM")}}</div> - - - -<p>La propiedad de solo lectura 'Element.shadowRoot' representa el shadow root alojado por el elemento. Use {{DOMxRef("Element.attachShadow()")}} para agregar un shadow root a un elemento existente.</p> - -<h2 id="Syntax" name="Syntax">Syntax</h2> - -<pre class="syntaxbox">var <em>shadowroot =</em><em> element</em>.shadowRoot; -</pre> - -<h3 id="Value">Value</h3> - -<p>A {{DOMxRef("ShadowRoot")}} object instance, or <code>null</code> if the associated shadow root was attached with its {{DOMxRef("ShadowRoot.mode", "mode")}} set to <code>closed</code>. (See {{DOMxRef("Element.attachShadow()")}} for further details).</p> - -<h2 id="Examples">Examples</h2> - -<p>The following snippets are taken from our <a href="https://github.com/mdn/web-components-examples/tree/master/life-cycle-callbacks">life-cycle-callbacks</a> example (<a href="https://mdn.github.io/web-components-examples/life-cycle-callbacks">see it live also</a>), which creates an element that displays a square of a size and color specified in the element's attributes.</p> - -<p>Inside the <code><custom-square></code> element's class definition we include some life cycle callbacks that make a call to an external function, <code>updateStyle()</code>, which actually applies the size and color to the element. You'll see that we are passing it <code>this</code> (the custom element itself) as a parameter.</p> - -<pre class="brush: js">connectedCallback() { - console.log('Custom square element added to page.'); - updateStyle(this); -} - -attributeChangedCallback(name, oldValue, newValue) { - console.log('Custom square element attributes changed.'); - updateStyle(this); -}</pre> - -<p>In the <code>updateStyle()</code> function itself, we get a reference to the shadow DOM using {{domxref("Element.shadowRoot")}}. From here we use standard DOM traversal techniques to find the {{htmlelement("style")}} element inside the shadow DOM and then update the CSS found inside it:</p> - -<pre class="brush: js">function updateStyle(elem) { - const shadow = elem.shadowRoot; - const childNodes = Array.from(shadow.childNodes); - - childNodes.forEach(childNode => { - if (childNode.nodeName === 'STYLE') { - childNode.textContent = ` - div { - width: ${elem.getAttribute('l')}px; - height: ${elem.getAttribute('l')}px; - background-color: ${elem.getAttribute('c')}; - } - `; - } - }); -}</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-element-shadowroot', 'shadowRoot')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.Element.shadowRoot")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{DOMxRef("Element.openOrClosedShadowRoot")}} {{non-standard_inline}}</li> -</ul> |