HTML 的影子元素是什么？

Question

下面是shadow元素的示例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

HTML 的影子元素是什么？

What is the shadow element simply for HTML?

shadow-dom

reactjs

webpack

vue.js