HTML custom elements (basis for web components) are intended for things that should be added to DOM. Using it for any other purpose is probably a misuse.

In my personal case I'm using it so the DOM is more literal as to what's happening on the page. I'm of the naive opinion that you should be able to read the DOM and have a general sense of what the site looks like. Since I'm making a single-page site that loads everything at once, I have a webcomponent based router that declaratively states what route will be active given the URL. For example:

    𝚖𝚢-𝚛𝚘𝚞𝚝𝚎𝚛
      𝚖𝚢-𝚛𝚘𝚞𝚝𝚎(𝚙𝚊𝚝𝚝𝚎𝚛𝚗="/𝚑𝚘𝚖𝚎")
        // 𝚜𝚘𝚖𝚎 𝚑𝚘𝚖𝚎 𝚙𝚊𝚐𝚎
      𝚖𝚢-𝚛𝚘𝚞𝚝𝚎(𝚙𝚊𝚝𝚝𝚎𝚛𝚗="/𝚗𝚎𝚠𝚜")
        // 𝚜𝚘𝚖𝚎 𝚗𝚎𝚠𝚜 𝚙𝚊𝚐𝚎

not sure what happened, but your code example is almost all tofu (unicode [X]) to me. looks like it's using characters like "mathematical monospace lowercase letter 'm'" etc

edit: unidecoded:

  my-router
        my-route(pattern="/home")
        // some home page
        my-route(pattern="/news")
        // some news page