基础原生Web组件嵌套异常：common-button不渲染内部按钮

你遇到的问题核心是自定义元素的定义顺序和初始化时机：当Account组件渲染时，CommonButton还未被注册为自定义元素，浏览器会把<common-button>当作普通的未知HTML元素处理，不会触发它的构造函数，因此内部的<button>不会被渲染。

解决步骤： #

1. 调整脚本加载顺序
   确保CommonButton的代码在Account之前被浏览器加载执行。比如在HTML中按以下顺序引入脚本：

   <!-- 先加载CommonButton -->
   <script src="CommonButton.js"></script>
   <!-- 再加载Account -->
   <script src="Account.js"></script>
   

2. 修改Account组件的渲染时机（可选）
   如果你无法调整加载顺序，可以将Account的DOM渲染逻辑移到connectedCallback生命周期钩子中，同时确保CommonButton已定义后再渲染：

   class Account extends HTMLElement{
      connectedCallback(){
         // 检查CommonButton是否已注册
         if(customElements.get('common-button')){
            this.innerHTML = '<p>My account</p><common-button></common-button>';
         } else {
            // 等待CommonButton注册完成后再渲染
            customElements.whenDefined('common-button').then(() => {
               this.innerHTML = '<p>My account</p><common-button></common-button>';
            });
         }
      }
   }
   
   customElements.define('account', Account);
   

3. 优化CommonButton的事件绑定（额外建议）
   直接在innerHTML中写onclick不是最佳实践，建议改用DOM事件绑定：

   class CommonButton extends HTMLElement{
      constructor(){
         super();
         const button = document.createElement('button');
         button.textContent = 'Click Me';
         button.addEventListener('click', () => console.log('clicked'));
         this.appendChild(button);
      }
   }
   
   customElements.define('common-button', CommonButton);
   

这样调整后，<common-button>就能正确渲染出内部的<button>元素了。

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