How can I can if I its has child element before render

[jitendraP-ashutec]

I have below structure code for web component

<web-menu mainMenu>
       <a link="/home.html">home</a>
       <a link="/about.html">about</a>
   </web-menu>

so my question is in web-menu how can I check if its has child node want to manipulate before render into web component.
Like in stenciljs has @Element which get all element, so we can check it

Thanks,
Jitendra Prajapati

[usergenic]

You can use this.children inside your element as early as inside the constructor() as long as super() was called.

  constructor() {
    super();
    console.log(this.children);
  }

Curious what you're trying to do?

[jitendraP-ashutec]

Ok , Thanks for reply @usergenic
I haven't any solution yet.

Just one more question if I want to add class to host element then I can use like
this.classList.add('my-class');

but then I when I want to remove it I have to manually remove it, does any way to remove this class based atomically remove host based on property change because in this scenario I can't use classMap to add class in host element

[ynxtynxt]

If I understand your goal correctly, I think you can try using attribute reflection instead. With reflect: true, an html attribute will be set whenever you change the property. So you can match the value within the CSS attribute selector eg. :host([visitor="ex-wife"]){ display: none }

But if that isn't an option, you can try using custom getter/setter for the reactive property. eg.

@state()
get visitor(){ return this.__visitor; }
set visitor( aVisitor ){
  const oldVisitor = this.__visitor;
  this.__visitor = aVisitor;
  this.requestUpdate('visitor', oldVisitor );
  this.classList.toggle('hide-asset', aVisitor == 'debt collector');
}

or, I guess it's easier to just

updated( changedProperties ){
  this.classList.toggle('hide-asset', this.visitor == 'debt collector');
}

[jitendraP-ashutec]

ok Thanks @ynxtynxt , Its help me.