1. 35
    1. 11

      For those who don’t want to watch the video, the trick is to nest blocks, where the title of a given tree level is in the element and the subtree consists of more details elements outside the summary, and use the rule

      details > *:not(summary) { padding-left: 2em; }
    2. 4

      Technically the trees are still trees and they’re still interactive without the rule. The rule just makes the tree/hierarchy visually noticeable 🙃

    3. 4

      I like this method of adding tree-like styling to these: https://iamkate.com/code/tree-views/

    4. 4

      Is this an in spec use of Summary/Details tags? Like, as opposed to using it for menus and modals? Maybe yes if information, no if navigation?

      1. 4

        After poking around on …




        … I tend to think it is.

        The way I read those pages is that the details element is simply a group of stuff with a summary and the behavior that everything except the summary will only be displayed if the user wants to see it.