errors when there are hashes in url

[zaszlo]

Hello,

I have components in the page that are called using hashes (those id/anchors are not inside md), the page loads but I get these errors, my console is bloated with them:

Uncaught DOMException: Failed to execute 'querySelector' on 'DocumentFragment': '#1' is not a valid selector.
at HTMLElement._scrollTo (https://cdn.rawgit.com/zerodevx/zero-md/v1.1.0/build/zero-md.html:1:4077)
    at window.setTimeout (https://cdn.rawgit.com/zerodevx/zero-md/v1.1.0/build/zero-md.html:1:967)

_scrollTo | @ | zero-md.html:1
-- | -- | --
  | window.setTimeout | @ | zero-md.html:1
  | setTimeout (async) |   |  
  | a | @ | zero-md.html:1
  | _fire | @ | zero-md.html:1
  | Promise.all.then | @ | zero-md.html:1
  | Promise.then (async) |   |  
  | render | @ | zero-md.html:1
  | connectedCallback | @ | zero-md.html:1
  | append | @ | swiper.js:634
  | loopCreate | @ | swiper.js:2255
  | h.init | @ | swiper.js:3961
  | h | @ | swiper.js:3854
  | (anonymous) | @ | (index):187

Is there a way to fix it?

[zerodevx]

Hello, I definitely need more details, like:

1. Browser and version;
2. What other components are loaded;
3. What's the URL structure?

Is it possible to do a quick repro on jsbin so I can take a look?

Thanks.

[zaszlo]

Chrome, that is automatically updating to newest version, newest stable swiper with the option hashNavigation: true, jquery 1.12.4. and for zero-md also the webcomponents loader (newest, as the readme here instructs to configure it).

It would take me a while to prepare a repo, but I think any demo from swiper with that option so to have a hash in the url from start would trigger this problem. Not sure but probably it would be also triggered without swiper just a simple js to start out with a hash redirect present on the page, but not inside the md.

[zaszlo]

here's a zip with my html, etc. structure.

[zerodevx]

Oh that's because the numeric hash value is not a valid CSS selector, so <zero-md>'s anchor link feature throws an exception. Functionality is not affected though so everything still works.

As a quick workaround, trying renaming all your swiper slides' data-hash value to something like slide1 etc.

...
<div class="swiper-slide" data-hash="slide1">
...
</div>
<div class="swiper-slide" data-hash="slide2">
...
</div>
...

I'll fix this in the next release which should land very soon. There are some changes to how web components should be loaded as well - basically the community has decided that HTMLImports be deprecated in favour of ES Modules.

[zaszlo]

Thank you.

Probably it is not related, but can you please give a hint on why the tabbable div disappears bellow that zero-md. Maybe there is something with how the zero-md loading works and thus the tabbable doesn't appear because of the zero-mds inside of it? It is interesting that the tabbable div pops up if I slide away and back or open the developer tools... Same thing on both Chrome and FF.

[zerodevx]

Hmm I'm not really sure what you mean.. From your code it seems that your tab elements are a child of only your first slide, and not other slides? If that's the case then your tabs will only appear in the first slide and not the others.

[zaszlo]

Right, the tab should appear in the first slide (only) as the page loads but it doesn't, only after sliding back and forth or opening the devtools in the browser.

[zerodevx]

Swiper is calculating the initial height wrong. It's probably a timing issue. <zero-md> works asynchronously, so try adding a hook to tell Swiper to recalculate dimensions after <zero-md> is done with rendering. Something like:

window.addEventListener('zero-md-rendered', function() {
  if (mySwiper) { mySwiper.update(); }
});

[zaszlo]

Thank you! Works.