fix(element): fixed issue with incorrect lookup for lazy prelader and…

… images fixes #6901
nolimits4web · Aug 8, 2023 · 64513ac · 64513ac
1 parent 2dcb802
commit 64513ac
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 5 deletions.
diff --git a/scripts/utils/get-element-styles.js b/scripts/utils/get-element-styles.js
@@ -90,7 +90,7 @@ const proceedSlideReplacements = (content) => {
       if (line === '.swiper-lazy-preloader {') {
         return line.replace(
           '.swiper-lazy-preloader {',
-          '::slotted(.swiper-lazy-preloader) {animation: swiper-preloader-spin 1s infinite linear;',
+          '.swiper-lazy-preloader {animation: swiper-preloader-spin 1s infinite linear;',
         );
       }
       if (line.includes('animation: swiper-preloader-spin 1s infinite linear;')) {

diff --git a/src/core/core.mjs b/src/core/core.mjs
@@ -581,8 +581,11 @@ class Swiper {
 
     // Attach events
     swiper.attachEvents();
-
-    [...swiper.el.querySelectorAll('[loading="lazy"]')].forEach((imageEl) => {
+    const lazyElements = [...swiper.el.querySelectorAll('[loading="lazy"]')];
+    if (swiper.isElement) {
+      lazyElements.push(...swiper.hostEl.querySelectorAll('[loading="lazy"]'));
+    }
+    lazyElements.forEach((imageEl) => {
       if (imageEl.complete) {
         processLazyPreloader(swiper, imageEl);
       } else {

diff --git a/src/shared/process-lazy-preloader.mjs b/src/shared/process-lazy-preloader.mjs
@@ -3,7 +3,10 @@ export const processLazyPreloader = (swiper, imageEl) => {
   const slideSelector = () => (swiper.isElement ? `swiper-slide` : `.${swiper.params.slideClass}`);
   const slideEl = imageEl.closest(slideSelector());
   if (slideEl) {
-    const lazyEl = slideEl.querySelector(`.${swiper.params.lazyPreloaderClass}`);
+    let lazyEl = slideEl.querySelector(`.${swiper.params.lazyPreloaderClass}`);
+    if (!lazyEl && swiper.isElement) {
+      lazyEl = slideEl.shadowRoot.querySelector(`.${swiper.params.lazyPreloaderClass}`);
+    }
     if (lazyEl) lazyEl.remove();
   }
 };

diff --git a/src/swiper-element.mjs b/src/swiper-element.mjs
@@ -289,7 +289,8 @@ class SwiperSlide extends ClassToExtend {
     if (lazy) {
       const lazyDiv = document.createElement('div');
       lazyDiv.classList.add('swiper-lazy-preloader');
-      this.appendChild(lazyDiv);
+      lazyDiv.part.add('preloader');
+      this.shadowRoot.appendChild(lazyDiv);
     }
   }