children and parentNode commands not work on web components

72 Views Asked by At

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>
0

There are 0 best solutions below