Custom Web Elements / Lit Elements - Render child elements only when a parent element is present and way to transfer data among all child elements?

New to Stack Overflow and Lit.

I'm building something using Lit and wanted to know how do I render element/s only if a parent element is present. I am trying to add a login element dependency which will let user to use these elements only if the login element is present.

Example of what should be allowed.

<login-element> 
    <child-element-button> </child-element-button>
</login-element>

Example of what should not be allowed. <child-element-button> </child-element-button>

Another problem that I have is a way for the child elements to share data, it can be to and from sibling elements, children elements, grandchildren element and so on. I do not have a solution for data sharing currently and would like to know the possible ways to achieve this.

Is there a way to achieve all of this without making <login-element> the parent element? something like this?

<login-element> </login-element>
<div> ... </div>
<my-custom-button> </my-custom-button>
<p> ... </p>
<my-colors> </my-colors开发者_运维知识库>
<my-custom-footer> </my-custom-footer>

In short, I need users to be able to use custom elements only if <login-element> if present anywhere in the document and the custom elements that are present should be able to communicate between each other. For instance, a <my-colors> element should be able to send active color data to <display-image> element which will render an image with a specific background color received from `.

Currently, I read the child elements of <login-element>, copy the nodes, run loop, delete original nodes and append with those copied nodes. Additionally, in every child elements, I check if <login-element> is present in DOM or not, if present, render, else render a error element. As for passing and receiving data to and from other components, I have not tried anything.

Than you for your time.