praveenpuglia/shadow-dom-in-depth

Would something like this help? (just a draft)

RosanaRufer opened this issue · 7 comments

RosanaRufer commented

For the 'terminology' part visualising the definitions with this abstraction may be helpful...
image

praveenpuglia commented

Hi @Totemika . That's amazing ❤️
A visualisation like this will certainly be of great help for the terminologies part.

For this specific one, can we somehow show the shadow root to be inside of the host but still make it stand out as its own thing?

Example - Can we put a green circle inside the host element node depicting it as a walled thing inside the host and then showing the green tree, more like a zoomed in view of it?

  • 👍1
RosanaRufer commented

Thank you! I wasn't expecting a positive answer! I will develop this idea during the week in my free time and post any updates on this thread. This is interesting 😄

  • ❤️1
praveenpuglia commented

Hi @Totemika , did you get a chance to look at it? :)

RosanaRufer commented

I have no idea how to do the "like a zoomed in view". I am more aware of my underdeveloped design skills 🤣 I'm learning to use the Sketch app though by trying this out... Here is my next shot...

shadow-tree--arr

shadow-tree

praveenpuglia commented

This is brilliant! LGTM the way you want to. You want to add these one by one for the different terminologies or all of them at once?

Seriously, this is lovely! :)

praveenpuglia commented

Hey @Totemika! Is this still on? This would be so cool to have. I guessed you may have been busy elsewhere. Any chance we can continue this ?

RosanaRufer commented

@praveenpuglia wow, sorry I have totally forgotten this. I am noting it down to push it forward during the next days.

  • 👍1