"I love this pairing: with only HTML and CSS we can make a button that opens/closes anything we want. A tooltip or a menu is a wonderful use-case. This isn't a terribly difficult thing to do, but, you have to remember a bunch of stuff and put certain unique values on certain elements exactly. Remember the right command attribute value on the button"
"Even though we're putting a unique ID on the menu and using unique custom idents on the anchors, the first menu will open in the position of the last button. Why? Because we're using the Light DOM here, and the last generic a-menu menu {} selector will overridethe first one, making all buttons/menus use the values of the last one."
Anchor-positioned popovers using only HTML and CSS require many matching unique attributes: command values, menu IDs, commandfor links, anchor-names, and position-anchor values with fallbacks. A light DOM web component named <a-menu> can automate assigning those values, removing the need to manually add IDs, commands, or anchors. Introducing the web component, however, introduces JavaScript, which can increase fragility and delayed rendering compared to pure HTML/CSS. In light DOM usage, generic selectors can cascade so the last a-menu menu {} rules override earlier ones, causing menus to position using the last button's values. CSS @scope may provide a scoping fix.
Read at Frontendmasters
Unable to calculate read time
Collection
[
|
...
]