1

I have page that is based on web components. I can find every custom compenent by custom tag name, but when I want to get children of element in chrome devtools console, I have empty list (document.getElementsByTagName ('my-custom-component')[0].children). In html structure I see full hierarchy. What can I do to access childs of webComponent element?

In code below I can get slot element, but can not get lightning-icon by element.children.

<div class="slds-m-horizontal_xx-small slds-m-bottom_x-small" id="xxx"><slot <div class="slds-m-horizontal_xx-small slds-m-bottom_x-small" id="xxx">
   <slot name="icon">
      <lightning-icon c-app_app="" slot="icon" class="slds-icon-utility-edit slds-icon_container" id="sth2">
         <lightning-primitive-icon>
            <svg focusable="false" data-key="edit" aria-hidden="true" class="slds-icon slds-icon-text-default slds-icon_x-small">
               <use xlink:href="/slds/2.8.3//assets/icons/utility-sprite/svg/symbols.svg#edit"></use>
            </svg>
         </lightning-primitive-icon>
      </lightning-icon>
   </slot>
   <span class="slds-p-left_small">Edit the name and description of your component.</span>
</div>
Lucas
  • 81
  • 7
  • Shadow DOM anyone? – connexo Jul 04 '19 at 18:15
  • I know it is related to shadow DOM, but in this case I need to get lightning-icon as child of slot and have no idea how to do it. – Lucas Jul 04 '19 at 18:30
  • Add a method on the Element which exposes its contents? – Danny '365CSI' Engelman Jul 05 '19 at 08:29
  • Problem is that this is output of external framework and I can not change it. I found that in chrome dev-tools there are DOM and shadow DOM element shown as one tree. When framework close webElement (disable access to shadowRoot) there is no option to move down the tree displaied in dev-tools from JS. – Lucas Jul 06 '19 at 21:45

0 Answers0