| /** | |
| * Recursive depth-first search to find all shadow roots within a webpage. | |
| * | |
| * Example usage: let's imagine you come across a page that has a bunch of | |
| * expandable information sections, and you would like to expand all of those | |
| * info sections for the sake of printing to a PDF or for the ease of | |
| * performing a simple `CTRL+F` search across the information. Let's assume | |
| * those expanding buttons are buried within Shadow DOM. (Perhaps the site is | |
| * using Angular or something of the sort & the buttons are separate | |
| * components, thus by default they end up in a Shadow DOM whenever included.) |
Vue.js provides a good example for working with deep nested objects or tree data structures. But, how about when Vuex is involved?
Fortunately, Evan You (Vue.js' creator) gives us a hint:
...Or, you can use the same flat structure and use ids to reference nested items, and use a Vuex getter in each tree item component to retrieve its children.
So, how do we go about doing that? After a few attempts getting nested objects' reactivity to work, here is what I did.