web-component - 我如何知道 litelement 的屏幕上是否有 web 组件？

Question

我用litelement做了一个小项目，但是我想在显示webcomponent时触发一个事件，不仅是第一次，而且每次显示组件时，我该怎么做？

提前致谢

Answer 1

Intersection Observer API将帮助您查找元素是否在屏幕上。有关更多信息，请访问 MDN 文档。

// 1. Observer options
let options = {
  // The scroll area - mostly body or document
  root: document.querySelector('#parent'),
  rootMargin: '0px',
  threshold: 1.0
};

let callback = () => { /* Do something */ };

// Observe Element
let observer = new IntersectionObserver(callback, options);

// Start observing
const targetElm = document.querySelector('#target');
observer.observe(targetElm);

除了 IE，所有浏览器都支持该 API，但 polyfill 已经可用： https ://github.com/w3c/IntersectionObserver