在shadow DOM中執行JS

我正在構建一個模塊化的Web應用程序，其中處理各種用戶創建的模型。 Shadow DOM是一個明顯的選擇，但我不明白JS如何在shadow DOM中執行。在shadow DOM中執行JS

我有一個HTML內容要加載下面的虛擬腳本。

<h1>Nice header</h1> 
<script type="text/javascript"> 
console.log('hello') 
alert('hi'); 
</script>

我加載頁面與以前的腳本是這樣的：

<div id="shadow-target"></div> 
<div id="non-shadow-target"></div> 

<script> 
    // Called on btn click 
    loadShadow = function(module) { 
     var root = document.querySelector('#shadow-target').createShadowRoot(); 
     var lighttarget = document.querySelector('#non-shadow-target');  

     $.get('whatever.html', function (data) { 
      alert(data); 
      $(root).append(data); // Nothing executed 
      $(lighttarget).append(data); // Works fine 
      // The header appears in both cases 
     }); 
    } 
</script>

正如評論說，不執行JS當內容被插入到影子DOM根。標題出現在兩種情況下，但腳本僅在輕型DOM中執行。這是爲什麼？自定義JS如何在shadow DOM中執行？（沒有跨域的東西。）

來源

2014-07-09 Gábor Imre

問題是，它有什麼不同，陰影DOM只是一個構造來創建自定義HTML模板，可以插入標籤等（多一點，但無論如何），它不是一個「不同」「一個新的線程和/或執行上下文，這將是一個webworker。 – adeneo

另請注意，使用ajax獲取帶腳本標記的HTML時存在已知問題，並且還會將腳本標記作爲字符串插入到DOM中。 – adeneo

既然你可以使用shadow DOM，我認爲你應該看看[自定義元素]（http://www.html5rocks.com/en/tutorials/webcomponents/customelements/）：shadow DOM和自定義元素是部分的Web組件項目，所以你應該一起查看它們。 – MaxArt

這jsfiddle驗證腳本執行確實在陰影dom內工作當你使用普通的JS的。因此，我沒有看到陰影和燈 dom在腳本執行方面的區別。

但是，如果我使用jQuery，它似乎是忽略腳本標記，當我追加html影子根。這也是一個jsfiddle。這似乎是一個與jQuery的重新定位腳本標記，它與陰影dom搞亂腳本的執行相結合的錯誤。 Here是嘗試來解釋此行爲的幾個鏈接之一。

因此，而不是使用

$(root).append(clone2);

使用

root.appendChild(clone2);

和腳本執行應該做工精細，即使在陰影DOM。

來源

2015-10-05 16:56:12 Abhinav

在shadow DOM中執行JS

回答

相關問題