Seçilemeyen Class Elementi
Mercedes-Benz'in araçlar sayfasında, sayfayı daha fazla yüklemek için gerekli olan bir buton var ve bu butonu ne CSS ile ne de JavaScript ile incele yaparak seçemiyorum. Konsol tarafında class isimlerinden birini, "dcp-result-pagination__load-more" yani bu class'ı alarak JavaScript ile değişkene atadım ve bir event eklemek istediğimde ekleyemedim, çünkü bana böyle bir element olmadığını söyledi. CSS tarafında bu class üzerinde !important özelliği ile birlikte bir arka plan rengi tanımlamaya çalıştığımda da hiçbir tepki göstermedi. Bu neden olabilir acaba? İlk defa böyle bir durum ile karşılaştım.
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (1)
Site webcomponent kullanıyor bunu da vue js ile yapmışlar. webcomponent'i seçtikten sonra shadowRoot dan istediğin elemente erişim sağlayabilirsin. Daha fazla detay için chatgpt detay yazdırdım.
document.querySelector("emh-search-result").shadowRoot.querySelector(".dcp-result-pagination__load-more").click()
Shadow DOM, bir HTML elementinin içindeki encapsulated (kapsüllenmiş) bir DOM ağacını ifade eder. Yani, bir web bileşeninin içindeki HTML, CSS ve JavaScript kodlarını dış dünyadan izole eder. Bu, bileşenin dışarıdan etkilenmesini önler ve bileşenin içindeki kodların dışarıdaki kodlardan etkilenmemesini sağlar.
document.querySelector("emh-search-result").shadowRoot ifadesi, "emh-search-result" adlı bir bileşenin shadow DOM'unu seçer. Ardından, bu shadow DOM içindeki .dcp-result-pagination__load-more sınıfına sahip bir elementi seçer ve ona bir tıklama işlemi gerçekleştirir.
Yani, bu kod parçası, bir web bileşeninin içindeki bir elemente erişmekte ve o element üzerinde bir işlem gerçekleştirmektedir. Bu tür yapılar genellikle karmaşık web uygulamalarında ve bileşen tabanlı mimarilerde kullanılır. Bu şekilde, bileşenler birbirinden izole edilir ve kodun daha modüler, yeniden kullanılabilir ve bakımı kolay olur.