Wix自定义元素仅默认标签生效，修改标签后无法显示

核心问题定位 #

修改自定义元素标签名后无法渲染，本质是自定义元素命名规范违规、样式选择器匹配错误，以及Wix平台配置未同步导致的。

错误原因拆解 #

1. 标签名不符合Web Components规范：你使用的custom-Output包含大写字母，规范要求自定义元素标签名必须是全小写且包含至少一个连字符，不能出现大写字符。
2. 样式选择器错误：你将样式中的元素选择器改成了#custom-Output（ID选择器），但自定义元素本身是标签，应该使用元素选择器（直接写标签名），除非你给元素手动添加了对应ID。
3. Wix后台配置未同步：修改代码中的标签名后，Wix编辑器里的自定义元素组件设置中的标签名需要和代码保持完全一致。

修正后的完整代码 #

将标签名改为符合规范的custom-output，同步修改样式选择器和类名，代码如下：

// To debug this code, open wixDefaultCustomElement.js in Developer Tools.

const IMAGE_URL = 'https://wix.to/vUBXBKU';
const H2_TEXT = 'This is a Custom Element';
const H3_1_TEXT = 'View its code by clicking the Settings button and pasting the Server URL into a new browser tab.';
const H3_2_TEXT = 'Explore this code and use it as a reference to create your own element.';
const DEBUG_TEXT = 'Loading the code for Custom Element \'custom-output\'. To debug this code, open wixDefaultCustomElement.js in Developer Tools.';

const createImage = () => {
  const imageElement = document.createElement('img');
  imageElement.src = IMAGE_URL;
  imageElement.id = 'wdce-image';
  return imageElement;
};

const createH2 = () => {
  const h2Element = document.createElement('h2');
  h2Element.textContent = H2_TEXT;
  h2Element.id = 'wdce-h2';
  return h2Element;
};

const createH3 = (id, text) => {
  const h3Element = document.createElement('h3');
  h3Element.id = id;
  h3Element.textContent = text;
  return h3Element;
};

const createTextContainer = () => {
  const textContainer = document.createElement('div');
  textContainer.id = 'wdce-text-container';
  textContainer.appendChild(createH2());
  textContainer.appendChild(createH3('wdce-h3-1', H3_1_TEXT));
  textContainer.appendChild(createH3('wdce-h3-2', H3_2_TEXT));
  return textContainer;
};

const createImageContainer = () => {
  const imageContainer = document.createElement('div');
  imageContainer.id = 'wdce-image-container';
  imageContainer.appendChild(createImage());
  return imageContainer;
};

const createStyle = () => {
  const styleElement = document.createElement('style');
  styleElement.innerHTML = `
    custom-output {
        background-color: #f0f4f7;
        display: flex;
        width: 100%;
        justify-content: center;
      }

    #wdce-image-container {
        width: 35%;
        max-width: 165px;
        display: flex;
        margin: 0 20px 0 30px;
        overflow: hidden;
    }

    #wdce-image {
        width: 100%;
        min-width: 100px;
    }

    #wdce-text-container {
        display: flex;
        flex-direction: column;
        width: 65%;
        justify-content: center;
        max-width: 314px;
        min-width: 200px;
    }

    #wdce-h2 {
        font-family: 'HelveticaNeueW01-45Ligh, HelveticaNeueW02-45Ligh, HelveticaNeueW10-45Ligh, Helvetica Neue, Helvetica, Arial, メイリオ, meiryo, ヒラギノ角ゴ pro w3, hiragino kaku gothic pro, sans-serif',
        font-size: 16px;
        font-weight: 500;
        letter-spacing: 0.89px;
        color: #32536a;
        margin: 0 0 16px 0;
    }

    #wdce-h3-1, #wdce-h3-2 {
        font-family: 'HelveticaNeueW01-45Ligh, HelveticaNeueW02-45Ligh, HelveticaNeueW10-45Ligh, Helvetica Neue, Helvetica, Arial, メイリオ, meiryo, ヒラギノ角ゴ pro w3, hiragino kaku gothic pro, sans-serif',
        font-size: 14px;
        font-weight: 300;
        line-height: 1.43;
        color: #162d3d;
        margin: 0 0 8px 0;
    }
    `;
  return styleElement;
};

class CustomOutput extends HTMLElement {
  constructor() {
    super();
    console.log(DEBUG_TEXT);
  }

  connectedCallback() {
    this.appendChild(createStyle());
    this.appendChild(createImageContainer());
    this.appendChild(createTextContainer());
  }
}
customElements.define('custom-output', CustomOutput);

同步Wix后台配置步骤 #

1. 打开Wix编辑器，找到添加的自定义元素组件
2. 进入组件设置面板，将标签名修改为和代码一致的custom-output
3. 重新发布网站，刷新页面即可看到渲染效果

关键注意事项 #

• 自定义元素标签名必须满足：全小写、包含至少一个连字符，不能使用单个单词（如customoutput不合法，custom-output合法）
• 样式中针对自定义元素的选择器要直接使用标签名，不要加#（ID选择器）或.（类选择器），除非你手动给元素设置了对应属性
• 类名与标签名保持对应（如CustomOutput对应custom-output）是约定俗成的写法，便于代码维护

内容的提问来源于stack exchange，提问作者Exit Code 1