{"id":787,"date":"2019-03-15T22:22:49","date_gmt":"2019-03-16T04:22:49","guid":{"rendered":"https:\/\/www.pensemosweb.com\/?p=787"},"modified":"2024-03-07T16:21:48","modified_gmt":"2024-03-07T22:21:48","slug":"que-elementos-de-html-pueden-tener-shadow-dom","status":"publish","type":"post","link":"https:\/\/pensemosweb.com\/en\/que-elementos-de-html-pueden-tener-shadow-dom\/","title":{"rendered":"\u00bfQu\u00e9 elementos de HTML pueden tener Shadow DOM?"},"content":{"rendered":"<p>Cuando trabajamos con <a href=\"https:\/\/pensemosweb.com\/en\/como-crear-un-componente-web-elementos-html-personalizados\/\">componentes web<\/a>, normalmente usamos el shadow DOM en los <a href=\"https:\/\/pensemosweb.com\/en\/como-crear-un-componente-web-elementos-html-personalizados\/\">custom elements<\/a> que creamos debido a que es la manera en que podemos sacarle todo el potencial a este est\u00e1ndar. Pero seguro que m\u00e1s de una ocasi\u00f3n nos hemos preguntado, \u00bfQu\u00e9 elementos de HTML NO pueden aceptar Shadow DOM? Bueno, existen dos formas de saberlo.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>La especificaci\u00f3n del DOM Standard<\/li><li>Herramientas de desarrollador de Google Chrome<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">La especificaci\u00f3n del DOM Standard<\/h2>\n\n\n\n<p><strong>La manera m\u00e1s eficiente<\/strong> de saber exactamente que elementos NO soportan shadow DOM es guiarnos por lo que dice la especificaci\u00f3n.<\/p>\n\n\n\n<p><a href=\"https:\/\/dom.spec.whatwg.org\/#dom-element-attachshadow\">https:\/\/dom.spec.whatwg.org\/#dom-element-attachshadow<\/a><\/p>\n\n\n\n<p>En el punto 2 dice:<\/p>\n\n\n\n<p>If&nbsp;<a href=\"https:\/\/heycam.github.io\/webidl\/#this\">this<\/a>\u2019s&nbsp;<a href=\"https:\/\/dom.spec.whatwg.org\/#concept-element-local-name\">local name<\/a>&nbsp;is not one of the following:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>to&nbsp;<a href=\"https:\/\/html.spec.whatwg.org\/multipage\/custom-elements.html#valid-custom-element-name\">valid custom element name<\/a><\/li><li>&#8220;<code>article<\/code>&#8220;, &#8220;<code>aside<\/code>&#8220;, &#8220;<code>blockquote<\/code>&#8220;, &#8220;<code>body<\/code>&#8220;, &#8220;<code>div<\/code>&#8220;, &#8220;<code>footer<\/code>&#8220;, &#8220;<code>h1<\/code>&#8220;, &#8220;<code>h2<\/code>&#8220;, &#8220;<code>h3<\/code>&#8220;, &#8220;<code>h4<\/code>&#8220;, &#8220;<code>h5<\/code>&#8220;, &#8220;<code>h6<\/code>&#8220;, &#8220;<code>header<\/code>&#8220;, &#8220;<code>main<\/code>&#8220;, &#8220;<code>nav<\/code>&#8220;, &#8220;<code>p<\/code>&#8220;, &#8220;<code>section<\/code>&#8220;, or &#8220;<code>span<\/code>&#8220;<\/li><\/ul>\n\n\n\n<p>then&nbsp;<a href=\"https:\/\/heycam.github.io\/webidl\/#dfn-throw\">throw<\/a>&nbsp;a &#8220;<code><a href=\"https:\/\/heycam.github.io\/webidl\/#notsupportederror\">NotSupportedError<\/a><\/code>&#8221;&nbsp;<code><a href=\"https:\/\/heycam.github.io\/webidl\/#idl-DOMException\">DOMException<\/a><\/code>.<\/p>\n\n\n\n<p>Lo anterior se traduce de la siguiente manera.<\/p>\n\n\n\n<p>Si el nombre del elemento es:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Un nombre v\u00e1lido de custom element, que b\u00e1sicamente es un nombre con un guion medio.<\/li><li>&#8220;<code>article<\/code>&#8220;, &#8220;<code>aside<\/code>&#8220;, &#8220;<code>blockquote<\/code>&#8220;, &#8220;<code>body<\/code>&#8220;, &#8220;<code>div<\/code>&#8220;, &#8220;<code>footer<\/code>&#8220;, &#8220;<code>h1<\/code>&#8220;, &#8220;<code>h2<\/code>&#8220;, &#8220;<code>h3<\/code>&#8220;, &#8220;<code>h4<\/code>&#8220;, &#8220;<code>h5<\/code>&#8220;, &#8220;<code>h6<\/code>&#8220;, &#8220;<code>header<\/code>&#8220;, &#8220;<code>main<\/code>&#8220;, &#8220;<code>nav<\/code>&#8220;, &#8220;<code>p<\/code>&#8220;, &#8220;<code>section<\/code>&#8220;, or &#8220;<code>span<\/code>&#8220;<\/li><\/ul>\n\n\n\n<p>Entonces si le puedes agregar Shadow DOM<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Herramienta de desarrollo de Google Chrome<\/h2>\n\n\n\n<p>La otra opci\u00f3n es usar las herramientas del desarrollador de Google Chrome para ver el shadow DOM de los elementos en una aplicaci\u00f3n.<\/p>\n\n\n\n<p>Esta configuraci\u00f3n se encuentra en los <strong>settings <\/strong>del panel de herramientas para el desarrollador, para ello, debemos dar clic en los tres puntitos verticales y despu\u00e9s en <code>settings<\/code> o solamente presionar <code>F1<\/code>.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2019\/03\/settings-1.jpg\" alt=\"\" class=\"wp-image-793\"\/><\/figure><\/div>\n\n\n\n<p>Luego en <strong>Preferences &nbsp;-&gt; Elements&nbsp;<\/strong>activamos el checkbox que dice<strong> Show user agent shadow DOM<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2019\/03\/show-user-agent-shadow-dom.jpg\" alt=\"\" class=\"wp-image-794\"\/><\/figure><\/div>\n\n\n\n<p>Ahora podemos revisar sitios web que tengan elementos que soporten shadow DOM, algunos ejemplos son el <strong>input,\u00a0select,\u00a0audio,\u00a0video<\/strong>, estos elementos ya contienen shadow DOM y por lo tanto NO podemos adjuntarles uno. En la siguiente imagen se muestra el elemento <code>input<\/code> :<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2019\/03\/example-input-shadow-DOM.jpg\" alt=\"\" class=\"wp-image-795\"\/><\/figure><\/div>\n\n\n\n<p>Tambi\u00e9n existen otros elementos que NO soportan Shadow DOM, ejemplo,<br \/><strong>img,&nbsp;a,&nbsp;button,&nbsp;br,&nbsp;b,<\/strong> etc.<\/p>\n\n\n\n<p>Tanto los elementos que ya tiene Shadow DOM como los que no lo soportan provocaran el siguiente error al invocar sobre ellos el m\u00e9todo <code>attachShadow({ mode: 'open' })<\/code>. Tal como dice la especificaci\u00f3n<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Uncaught DOMException: Failed to execute &#8216;attachShadow&#8217; on &#8216;Element&#8217;: This element does not support attachShadow<\/p><cite>Consola de Google Chrome<\/cite><\/blockquote>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>NotSupportedError: Operation is not supported<\/p><cite>Consola de Firefox<\/cite><\/blockquote>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Object doesn&#8217;t support property or method &#8216;attachShadow&#8217;<\/p><cite>Consola Microsoft Edge <\/cite><\/blockquote>","protected":false},"excerpt":{"rendered":"<p>Cuando trabajamos con componentes web, normalmente usamos el shadow DOM en los custom elements que creamos debido a que es la manera en que podemos sacarle todo el potencial a este est\u00e1ndar. Pero seguro que m\u00e1s de una ocasi\u00f3n nos hemos preguntado, \u00bfQu\u00e9 elementos de HTML NO pueden aceptar Shadow DOM? Bueno, existen dos formas [&hellip;]<\/p>","protected":false},"author":2,"featured_media":3734,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[24],"tags":[],"class_list":["post-787","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-componentes-web"],"_links":{"self":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts\/787","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/comments?post=787"}],"version-history":[{"count":1,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts\/787\/revisions"}],"predecessor-version":[{"id":3611,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts\/787\/revisions\/3611"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/media\/3734"}],"wp:attachment":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/media?parent=787"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/categories?post=787"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/tags?post=787"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}