document.execCommandを使用してカスタム要素を追加できません

Question

document.execCommand（https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand）を使用して、編集可能な要素にカスタム要素を追加しようとしています。

しかし、私はexecCommandを使用してカスタムポリマー要素を追加しようとすると、ブラウザはスコープにインポートされていてもカスタム要素を認識できません。

var video-id='FnoL3d33U8o'//a youtube video Id 
    var html = '<p><div><custom-video-element width="454" height="280" video-id="'+videoUrl+'"></custom-video-element></div></p>'; 
    document.execCommand('insertHTML', false, html); 

しかし、これは役立たず、カスタムビデオ要素はブラウザによって認識されません。別の方法がある場合、または私が蜃気楼の後を走っている場合は助けてください！

Answer 1

追加する要素がわかっている場合は、document.createElementを使用できます。

があることをachievする方法、複数のオプションですが、あなたの場合：

var p = document.createElement("p"); 
var div = document.createElement("div"); 
var custom = document.createElement("custom-video-element") 
custom.setAttribute("video-id", videoUrl); 
.. setting another attributes .. 

div.appendChild(custom); 
p.appendChild(div); 
document.appendChild(p); 

とそれはそれです。これはうまくいくはずです。

もちろん、より良い解決法があるかもしれませんが、あなたの場合にはこれはそれほど悪くありません。

var div = document.createElement("div"); 

var inner = "<div class="test"><div></div><p class="p"></p></div>; 
div.innerHTML = inner; 

div.querySelector(".p").appendChild(document.createElement("custom-video-element")); 

：あなたはJS内部の大きなHTML構造を作成する場合

、あなたのような何かを行います