如何用CSS或JS统一将以-wrap结尾的自定义标签设为inline-grid？

方案1：批量注册Web Components + 统一CSS样式 #

自定义元素必须注册才能被浏览器正确识别，我们可以创建一个通用的自定义元素类，批量注册所有以-wrap结尾的标签，同时用CSS统一设置样式。

1. 创建通用自定义元素类

// 基础自定义元素类，无通用逻辑需求则留空
class WrapBaseElement extends HTMLElement {
  constructor() {
    super();
  }
}

2. 批量注册标签
   可选择扫描DOM自动获取或手动维护标签列表（后者更可控）：

// 方式A：扫描当前DOM中所有以-wrap结尾的标签并去重
const allWrapTags = [...document.querySelectorAll('*')]
  .map(el => el.tagName.toLowerCase())
  .filter(tag => tag.endsWith('-wrap'));
const uniqueWrapTags = [...new Set(allWrapTags)];

// 方式B：手动维护需要注册的标签列表（推荐，适合提前规划的新增标签）
// const uniqueWrapTags = ['section-wrap', 'form-wrap', 'header-wrap'];

// 批量注册所有-wrap标签
uniqueWrapTags.forEach(tag => {
  customElements.define(tag, WrapBaseElement);
});

3. 统一设置CSS样式
   通过标签选择器或属性选择器匹配所有-wrap元素：

/* 匹配已注册的-wrap标签 */
section-wrap, form-wrap, header-wrap {
  display: inline-grid;
}

/* 兜底匹配所有以-wrap结尾的标签（覆盖未来新增未及时更新CSS的情况） */
*[tagName$="-wrap"] {
  display: inline-grid;
}

方案2：动态生成CSS样式表 + 批量注册 #

若后续频繁新增-wrap标签，可通过JavaScript动态生成CSS规则，避免手动修改CSS文件：

// 维护标签列表，新增时只需添加到这里
const wrapTags = ['section-wrap', 'form-wrap', 'header-wrap'];

// 动态生成并插入CSS样式
const styleSheet = document.createElement('style');
styleSheet.textContent = `${wrapTags.join(', ')} { display: inline-grid; }`;
document.head.appendChild(styleSheet);

// 批量注册自定义元素
class BasicWrapElement extends HTMLElement {}
wrapTags.forEach(tag => customElements.define(tag, BasicWrapElement));

注意事项 #

• 自定义元素标签名必须包含连字符（如-wrap），你的标签已符合HTML规范要求。
• 若选择扫描DOM的方式，需确保代码在DOM加载完成后执行（可放在DOMContentLoaded事件中）。

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