HTML 的阴影元素是什么？

Question

以下是阴影元素的示例 js

    class SliderImages extends window.HTMLDivElement {
      constructor (...args) {
        const self = super(...args)
        self.init()
        return self
      }

      init () {
        this.$ = $(this)
        this.props = this.getInitialProps()
        this.resolveElements()
      }

      getInitialProps () {
        let data = {}
        try {
          data = JSON.parse($('script[type="application/json"]', this).text())
        } catch (e) {}
        return data
      }

      resolveElements () {
        this.$slider = $('[data-slider]', this)
        this.$buttonNext = $('[data-slider-button="next"]', this)
        this.$buttonPrev = $('[data-slider-button="prev"]', this)
      }

      connectedCallback () {
        this.initSlider()
      }

      initSlider () {
        const { options } = this.props
        const config = {
          navigation: {
            nextEl: this.$buttonNext,
            prevEl: this.$buttonPrev
          },
          a11y: options.a11y
        }
        if (options.autoplay && options.autoplaySpeed) {
          config.autoplay = {
            delay: options.autoplaySpeed
          }
        }
        this.slider = new Swiper(this.$slider, config)
      }
    }

    window.customElements.define('flynt-slider-images', SliderImages, { extends: 'div' })

我不清楚为什么要使用阴影元素以及使用它们的好处是什么。 当我要使用阴影元素时，需要什么特殊的JS库？ 如果有人请简单清楚地解释我，我很感激。

Answer 1

自定义元素允许您创建、重用和分发您自己的 web 组件，而无需原生 Javascript。 不需要第 3 方框架。

阅读 Google 的演示文稿： https://developers.google.com/web/fundamentals/web-components/customelements

---

Shadow DOM允许隔离 web 组件的 CSS 样式，以控制它们的呈现并避免在非托管网页中显示时出现不必要的副作用。

阅读 Google 的介绍： https://developers.google.com/web/fundamentals/web-components/shadowdom