如何将Angular组件的内部内容作为输入获取？

如果你用的是原生Web Components开发自定义组件，别再用document.getElementById绕弯路了，直接在组件类里通过实例自身的属性就能拿到内部内容：

原生Web Components实现 #

组件实例本身就是DOM元素，直接访问this.innerHTML就能获取标签包裹的原始内容，把它赋值给组件内变量即可：

class MyComponent extends HTMLElement {
  constructor() {
    super();
    // 初始化时获取内部文本/HTML
    this.innerContent = this.innerHTML;
    console.log(this.innerContent); // 输出 "Hello There"
  }

  // 若依赖组件挂载到DOM后的状态，可在connectedCallback里获取
  connectedCallback() {
    this.innerContent = this.innerHTML;
    // 这里可以基于内容做后续逻辑，比如渲染到Shadow DOM
    this.render();
  }

  render() {
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.innerHTML = `<div class="content">${this.innerContent}</div>`;
  }
}

customElements.define('my-component', MyComponent);

如果组件使用了Shadow DOM，this.innerHTML拿到的是组件外部传入的Light DOM内容，和Shadow DOM内部的渲染内容互不干扰。

为什么document.getElementById效果差？ #

• 组件未完成DOM挂载时，getElementById可能找不到目标元素；
• 页面中若存在重复ID，会导致获取结果错误；
• 直接访问组件实例属性更高效，无需额外DOM查找。

框架场景补充 #

如果是用Vue/React这类框架开发自定义组件：

• Vue：通过插槽<slot>接收内容，在组件内可通过$slots.default获取，纯文本场景直接取this.$slots.default[0].text即可；
• React：组件的props.children就是内部传入的内容，直接访问赋值即可：

function MyComponent(props) {
  const innerContent = props.children;
  return <div>{innerContent}</div>;
}

内容的提问来源于stack exchange，提问作者Salameh Salameh