{"id":8550,"date":"2026-02-16T13:44:32","date_gmt":"2026-02-16T18:44:32","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=8550"},"modified":"2026-02-16T13:44:33","modified_gmt":"2026-02-16T18:44:33","slug":"anchored-menus-and-a-lesson-in-scoping","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/anchored-menus-and-a-lesson-in-scoping\/","title":{"rendered":"Anchored Menus and a Lesson in Scoping"},"content":{"rendered":"\n

I had this (bad) idea. <\/p>\n\n\n\n

It’s related to popovers and anchor-positioned menus<\/a>. 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. <\/p>\n\n\n\n

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. <\/p>\n\n\n\n

    \n
  1. Remember the right command<\/code> attribute value on the button<\/li>\n\n\n\n
  2. Put a unique id<\/code> on the menu. <\/li>\n\n\n\n
  3. Match up the commandfor<\/code> attribute on the button to that id. <\/li>\n\n\n\n
  4. Make sure the button has an unique anchor-name<\/code>. <\/li>\n\n\n\n
  5. Match up the position-anchor<\/code> on the menu to that unique name. <\/li>\n\n\n\n
  6. Make sure you’re using good anchor positioning fallbacks. <\/li>\n<\/ol>\n\n\n
    <button<\/span>\n  commandfor<\/span>=\"menu-12345\"<\/span>\n  command<\/span>=\"toggle-popover\"<\/span>\n  style<\/span>=\"anchor-name: --menu-button-12345;\"<\/span>\n><\/span>\n  Toggle Menu\n<\/button<\/span>><\/span>\n\n<menu<\/span>\n  id<\/span>=\"menu-12345\"<\/span>\n  style<\/span>=\"position-anchor: --menu-button-12345\"<\/span>\n><\/span>\n  Menu\n<\/menu<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
    That feels like kind of a lot to remember and get right.<\/p>\n\n\n\n
    Here’s my (bad) idea: make a quick <web-component><\/code> that does those things. On the surface, maybe that makes sense. It did to me. But the ridiculous part is that now it introduces JavaScript into things in a place we didn’t need JavaScript before, which makes it more fragile (and potentially render later) than it would without. <\/p>\n\n\n\n
    So I’m not advocating for use here, but I did learn some things along the way that I found interesting and worth sharing. <\/p>\n\n\n\n
    Light DOM Web Component<\/h2>\n\n\n\n
    I called it <a-menu><\/code> just to be short and slightly cheeky. <\/p>\n\n\n
    import<\/span> { LitElement, html, css } from<\/span> 'lit'<\/span>;\nimport<\/span> { customElement, property } from<\/span> 'lit\/decorators.js'<\/span>;\n\n@customElement('a-menu'<\/span>)\nexport<\/span> class<\/span> AMenu<\/span> extends<\/span> LitElement<\/span> <\/span>{\n  @property({ attribute<\/span>: 'button-name'<\/span> }) buttonName = 'Menu'<\/span>;\n\n  private menuId = `menu-${Math<\/span>.random().toString(36<\/span>).substr(2<\/span>, 9<\/span>)}<\/span>`<\/span>;\n  \n  \/\/ Disable the Shadow DOM<\/span>\n  createRenderRoot() {\n    return<\/span> this<\/span>;\n  }\n\n  firstUpdated() {\n    const<\/span> menu = this<\/span>.querySelector('menu'<\/span>);\n    if<\/span> (menu) {\n      menu.setAttribute('popover'<\/span>, 'auto'<\/span>);\n      menu.id = this<\/span>.menuId;\n    }\n  }\n\n  render() {\n    return<\/span> html`\n      <style<\/span>><\/span>\n        a-menu {\n          display: inline-block;\n          \n          button {\n            position-anchor: --menu-button-<\/span>${menuId}<\/span>;\n          }\n  \n          menu<\/span> {\n            position-anchor<\/span>: --menu-button-<\/span><\/span>${menuId}<\/span>;\n            position-area: block-end span-inline-start;\n            position-try: flip-block, flip-inline, flip-block flip-inline;\n            inset: unset;\n            margin: 0;\n          }\n        }\n      <\/style<\/span>><\/span>\n      <button<\/span>\n        commandfor<\/span>=\"<\/span><\/span><\/span>${this<\/span>.menuId}<\/span>\"<\/span>\n        command<\/span>=\"toggle-popover\"<\/span>\n      ><\/span>\n        <\/span>${this<\/span>.buttonName}<\/span>\n      <\/button<\/span>><\/span>\n    `<\/span>;\n  }\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    Then usage is as simple as this:<\/p>\n\n\n
    <a-menu<\/span> button-name<\/span>=\"My Menu\"<\/span>><\/span>\n  <menu<\/span>><\/span>\n    <li<\/span>><\/span><button<\/span>><\/span>Edit<\/button<\/span>><\/span><\/li<\/span>><\/span>\n    <li<\/span>><\/span><button<\/span>><\/span>Delete<\/button<\/span>><\/span><\/li<\/span>><\/span>\n    <li<\/span>><\/span><button<\/span>><\/span>Share<\/button<\/span>><\/span><\/li<\/span>><\/span>\n  <\/menu<\/span>><\/span>\n<\/a-menu<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
    Notice we don’t<\/strong> need to:<\/p>\n\n\n\n
      \n
    1. Remember a unique ID on the menu.<\/li>\n\n\n\n
    2. Remember the popover commands.<\/li>\n\n\n\n
    3. Remember to attach an anchor-name<\/code> or position-anchor<\/code> to put the menu next to the button.<\/li>\n<\/ol>\n\n\n\n
      … but now we have a problem.<\/h3>\n\n\n\n
      Even though we’re putting a unique ID on the menu and using unique custom idents on the anchors, the first <\/strong>menu will open in the position of the last<\/strong> button. Why? Because we’re using the Light DOM here, and the last generic a-menu menu {}<\/code> selector will override <\/em><\/strong>the first one, making all <\/em><\/strong>buttons\/menus use the values of the last one.<\/p>\n\n\n\n
      Problem Demo<\/summary>\n