StencilJS, how to read/get all the declared props in a class through React ref of the relative rendered component?

Question

I am trying to obtain all the properties defined in a StencilJS web component class from another FW, which is similar to React but proprietary (so unfortunately I can't publish a working snippet).

This is how the props are defined in the source code from the Stencil component class:

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;
}

I can't find anywhere in the Stencil documentation how to get a list of those props. In input I have its ref or the node element obtained through simple document.querySelector in the componentDidMount function.

Any ideas about how to achieve that and if that is possible?

Thank you.

Answer 1

Try accessing through attributes (that's equal to 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);
}