-1

I have a customelement WebDesktop that can create another customelement AppWindow.

If I create several AppWindow I would like the one I clicked the last to be "focused" when it's created but also that if I click on an already created one it should be focused above the others , it should have a higher z-index.

Is there any way to do this? I don't understand how each already created AppWindow can see how many new elements has been created since it was intially created.

My solution would be to put the zIndex to the amount of current amount of created AppWindow Can each instanced customelement somehow find out how many new elements has been created or something like that? And also keep track if they have been removed?

FatDog
  • 153
  • 1
  • 9
  • Have you tried coding it out yet? Providing code with questions will help the most for giving you better answers. – CoderLee Dec 30 '19 at 16:15
  • I don't know if it's possible in JSfiddle to use classes and I am not allowed to distribute my code. Imagine 5 custom elements in a shadowdom, they were created by an eventlistener and the first one should be aware if there are new added to them. I'm sorry I can't provide more resources – FatDog Dec 30 '19 at 16:37
  • You could try using an array to track the changes, and for determining z-index based on array index. Also, if you can't share your code then you should be consulting the senior or a more senior engineer in your organization. – CoderLee Dec 30 '19 at 16:49

1 Answers1

1

Here are some techniques that can help

Closest element UP the dom

let desktop = this.closest('web-desktop')

This standard method on every element get's you the desktop an AppWindow is in

If your AppWindows have shadowDOM the above method will not work,
as it does not "break out" of shadowDOM

To pierce through shadowRoot(s) use .closestElement() from: Custom Element getRootNode.closest() function crossing multiple (parent) shadowDOM boundaries

count children

Once you know the desktop your AppWindows are in desktop.children
which you can convert to an Array with [...desktop.children]

If you have other DOM elements in .children your AppWindows are:
[...desktop.querySelectorAll('app-window')]

then [...desktop.querySelectorAll('app-window')]`.length is your AppWindow count

going fancy with a live HTMLcollection

The above get you static collections

desktop.getElementsByTagName('app-window')

gets you a live HTMLcollection, which can be helpfull: When is NodeList live and when is it static?

In the Desktop constructor you do:

this.windows = this.shadowRoot.getElementsByTagName('app-window')

and a Getter method in Desktop:

get windowcount(){
  return this.windows.length;
}

So in an AppWindow constructor you can do:

let AppWindowIndex = this.closestElement('web-desktop').windowcount + 1;

disclaimer: all off the top of my head, might have made some syntax errors!

Danny '365CSI' Engelman
  • 16,526
  • 2
  • 32
  • 49
  • Hey @Danny '365CSI' Engelman I'm trying to get around detecting an iframe nested within a Shadow DOM element and I seem to be unable to. I have placed a question explaining the details here: https://stackoverflow.com/questions/74225479/how-to-capture-iframe-nested-within-shadow-doms-shadow-root-open-element I tried your method but somehow it's returning ```null```. – Verminous Oct 27 '22 at 16:45