Discussion: Anchor.js usability (for on-hover anchor links)

[alifeee]

I would like to use AnchorJS with zero-md.

This adds the little anchors to headings, so you can click them to link to the heading from elsewhere. e.g., in all GitHub markdown. i.e.,

They suggest using it like

import 'https://cdn.jsdelivr.net/npm/anchor-js/anchor.min.js';
anchors.add();

However, it selects the headings using document.querySelectorAll

https://github.com/bryanbraun/anchorjs/blob/7820d5f6a6d41eb92000ab9c22b9362262a6b8a8/anchor.js#L274-L286

From what I understand about shadow DOMs, this is incompatible with the way zero-md works.

Am I right in thinking this way?

Mermaid similarities

It seems similar to how Mermaid is currently suggested to be used:

https://github.com/zerodevx/zero-md/issues/65

https://zerodevx.github.io/zero-md/recipes/#support-mermaid-diagrams

For now, I must disable the shadow DOM. #82 currently breaks this.

Should it be in the remit of these external libraries (Mermaid/AnchorJS) to allow use with the shadow DOM, or is it just something that will never be supported by them?

[zerodevx]

Further to #82, now I see why you're using no-shadow. We probably don't need an external library once #83 lands though.

However, it selects the headings using document.querySelectorAll https://github.com/bryanbraun/anchorjs/blob/7820d5f6a6d41eb92000ab9c22b9362262a6b8a8/anchor.js#L274-L286 From what I understand about shadow DOMs, this is incompatible with the way zero-md works. Am I right in thinking this way?

Yes - document.querySelector() can't pierce through shadow dom.

It seems similar to how Mermaid is currently suggested to be used: https://github.com/zerodevx/zero-md/issues/65 https://zerodevx.github.io/zero-md/recipes/#support-mermaid-diagrams For now, I must disable the shadow DOM. https://github.com/zerodevx/zero-md/issues/82 currently breaks this. Should it be in the remit of these external libraries (Mermaid/AnchorJS) to allow use with the shadow DOM, or is it just something that will never be supported by them?

Mermaid is designed to work in light dom context. It's probably not their remit - if feels like something that I'll need to add as a feature (to make it work in zero-md's shadow-dom context).

[alifeee]

We probably don't need an external library once https://github.com/zerodevx/zero-md/pull/83 lands though.

Why? AnchorJS is for adding the links to the document tree. Since AnchorJS uses document.querySelectorAll, zero-md needs to be in light-DOM.

83 simply fixed the scrolling in light-DOM. AnchorJS is still required to add the links to the tree.

[zerodevx]

Ah I see - I misunderstood what anchorjs is used for. It can be used with zero-md. Just make sure initialise anchorjs only after listening for the zero-md-rendered event.

[alifeee]

That is what I'm currently doing :), but AnchorJS implementation means I must use zero-md with no-shadow in order that it finds the <h2> etc. tags to add the link to.

[zerodevx]

YUp that's right - unfortunately it'll need to be in no-shadow mode.