我一直在研究在Magento 2中实现一个系统，该系统允许我们在渲染时将<div>标签转换为Vue组件，并试图找到一种对用户来说容易的实现方法，以及Magento默认情况下不会删除
我们正在使用Vue店面和Magento作为后端来实现一个网站。我们希望人们能够在Magento CMS区域中创建块并将这些块转移到渲染时的vue组件。
我最初尝试使用短代码样式（即[header-banner background ='...'] ... [/ header-banner]，但觉得这很直观，我想做一些基于围绕标准。因此，我决定使用以下系统：
<div data-vue='header-banner' data-prop-background='...'>...</div>
这从渲染的角度来看是可行的，但是我正在努力确定将其转换为Vue组件的最佳方法。
我到目前为止使用的方法基本上是一个大规模的正则表达式，它替换内容并在模板对象中返回格式化的版本。
reg ex基本上会查找其中带有data-vue的任何内容，并将其替换为相关标签（即<div data-vue='header-banner'> => <header-banner>）。这对于创建开始标签非常有效，但是我找不到匹配正确的结束标签的模式，当有人更新内容时，这种模式有99％的时间导致网站崩溃。
我当前的方法是使用DOMParser()类。这将使用HTML字符串（通过API btw传递），在其上运行document.querySelectorAll('[data-vue]')，并基本上替换所有相关标签。
这看起来像行得通...然后在服务器端渲染失败，并说未定义DOMParser()，我认为这是因为它在Node中不可用。
我也曾尝试添加JSDom和XMLDom，但正在努力使其正常工作。
我只想提供有关我正在做的事情听起来是否可行的建议，如果这是任何人以前遇到过的问题，以及是否有任何方法可以满足我的需要，基本上就是将<div data-vue='header-banner'>..</div>变成<header-banner>..</header-banner>
谢谢