StencilJS，如何通过相对渲染组件的 React ref 读取/获取类中所有声明的道具？

问题描述

我正在尝试从另一个 FW 获取 StencilJS Web 组件类中定义的所有属性，该类与 React 类似但属于专有（所以很遗憾我无法发布工作片段）。

这是在来自 Stencil 组件类的源代码中定义 props 的方式：

import { EventEmitter } from '@stencil/core';
import { CssClassMap } from '../../utils/utils';
import { StyleSheet } from 'jss';
import Base from '../../utils/base-interface';

export declare class Link implements Base {
    /** (optional) Tag class */
    customClass?: string;
    /** (optional) Tag size */
    size?: string;
    /** (optional) Tag variant */
    variant?: string;
    /** (optional) Tag href */
    href?: string;
    /** (optional) Tag target */
    target?: string;
    
    /** (optional) Close icon click event */
    linkClose: EventEmitter<MouseEvent>;
    componentwillUpdate(): void;
    componentDidUnload(): void;
    handleClose(event: any): void;
    render(): any;
}

我无法在 Stencil 文档中的任何地方找到如何获取这些道具的列表。在输入中，我有它的 ref 或通过 document.querySelector 函数中的简单 componentDidMount 获得的节点元素。

关于如何实现这一目标以及是否可能实现的任何想法？

谢谢。

解决方法

尝试通过 attributes（相当于 Stencil props）访问

const attributes = [];
const ref = document.querySelector('yourWebComponent');
for (i = 0,atts = ref.attributes,n = atts.length,arr = []; i < n; i++){
  attributes.push(atts[i].nodeName);
}