浏览器自定义命名空间元素处理器答案

【问题标题】：Browser custom namespaced element processors浏览器自定义命名空间元素处理器
【发布时间】：2016-01-16 17:44:51
【问题描述】：

在浏览器环境中，以这种方式创建 svg 元素
svg = document.createElement('svg');
将其附加到正文并填充 svg 元素不起作用，因为
svg.namespaceURI === 'http://www.w3.org/1999/xhtml'
但是这样做
svg = document.createElementNS('http://www.w3.org/2000/svg','svg')
它会起作用的。
这是合理的，因为该元素应该以 svg 方式 处理，而不是 html 方式
同样，创建
select = document.createElementNS('xxxx','select')
并附加到正文，该元素不会显示为众所周知的select 下拉列表，因为浏览器被告知它不是http://www.w3.org/1999/xhtml:select 元素，而是xxxx:select。
似乎节点处理被分派到不同的处理器，具体取决于节点本身的 NS（当被识别时）。
是否可以为Document 定义一个自定义命名空间URI，以便让其具有该特定nsURI 的节点以自定义方式处理，可能是通过一个函数？

【问题讨论】：

是的，应该可以。预期的结果是什么？
怎么样？我不会针对特定的结果，我正在评估拦截文档处理的不同方法，这个场景看起来很有趣
一种方法 developer.mozilla.org/en-US/docs/Web/API/Document/… , stackoverflow.com/questions/34055503/…;另见w3.org/TR/html4/sgml/dtd.html。可以定义“让浏览器以某种方式调度处理” 吗？ “处理”包括什么？
是的，这是关于自定义元素的，我知道它们，这个话题很热门且有争议，支持稀少，但它与命名空间无关
处理器应该做一些像自定义元素这样的事情，但我希望它也能在纯 xml 文档中工作。正如我告诉你的那样，我正在寻找工作的替代候选人

标签： javascript html xml-namespaces

【解决方案1】：

注意，不确定预期的结果是什么？回答尝试演示一种使用ProcessingInstruction的方法

// create `ProcessingInstruction`
var p = document.createProcessingInstruction("js", "{\"color\":\"blue\"}");
var div = document.getElementById("process");
document.body.insertBefore(p, div);
// use `ProcessingInstruction`
div.style.color = JSON.parse(div.previousSibling.nodeValue).color;

<!doctype html>
<html>
<body>
  <div id="process">Process</div>
</body>
</html>

【讨论】：

我喜欢使用 PI 的想法，尽管它与命名空间无关，并且我做了一些测试，好吧，像你一样以编程方式添加 PI 节点是可以的，但是 html 解析不处理 PI 和强制转换他们评论节点。您提供的链接中也说明了不支持的 html «It HTML we have no Processing Instructions. » .. pity ..
html 文档可以解析为节点类型 7 或节点类型 8，这些节点的 data 属性可以进一步解析，而无需使用 js 创建处理指令。其他替代方案可以使用xhtml，包括xslt 和stylesheet 或javascript 文档内的外部指令资源或节点；也可以使用shadowRoot 与template 和content 元素来呈现自定义指令，具体取决于应用程序的预期结果。