时间戳

首页 > 解决方案 > 从 Vue 组件访问 shadow DOM

vue.js - 从 Vue 组件访问 shadow DOM

问题描述

我目前正在使用 Vue3 开发一个自定义组件。我将其定义为：

import { defineCustomElement } from 'vue';
import Panel from '~/components/panel_custom/Panel.ce.vue';

const CustomElement = defineCustomElement(Panel);
window.customElements.define('panel-custom', CustomElement);

现在我正在尝试访问 shadowRoot 以使一些滚动到底部的功能正常工作。

如何访问元素以从 Like: 调用 shadowRoot element.shadowRoot;？

我在 vue 文档中找不到任何内容。

标签： vue.jsvuejs3shadow-domcustom-component

解决方案

在 Vue 组件中，影子根是父节点，因此您可以通过以下方式访问它this.$el.parentNode：

export default {
  mounted() {
    // assuming this Vue component is mounted as a custom element
    // via `defineCustomElement()` and `window.customElements.define()`
    console.log({ shadowRoot: this.$el.parentNode })
  }
}

或者，您可以在文档中查询自定义元素，并shadowRoot直接从引用中访问属性。下面的示例假设在查询时自定义元素存在于 light DOM 中，而不是 shadow DOM 中。document.querySelector()不会穿透 shadow DOM，因此如果该元素位于另一个具有封闭模式 shadow root的自定义元素中，则查询将返回undefined。

import { defineCustomElement } from 'vue'
import HelloWorld from '@/components/HelloWorld.vue'

const CustomElement = defineCustomElement(HelloWorld)
window.customElements.define('hello-world', CustomElement)

// assume element is in light DOM
const el = document.querySelector('hello-world')
console.log({ shadowRoot: el?.shadowRoot })

演示

推荐阅读