的方式來獲得充分的innerHTML在createdCallback雖然它有腳本標記

<script> 
    var proto = Object.create(HTMLElement.prototype); 
    proto.createdCallback = function() { 
    this._innerHTML = this.innerHTML; 
    } 
    document.registerElement('template-mini', { 
    prototype: proto 
    }) 
</script> 

<template-mini id='example1'> 
    <script type='text/beforeUpdate'> 
    console.log('hi') 
    this.name = 'Bob' 
    </script> 
    <p>hello {{name}}</p> 
</template-mini> 

<template-mini id='example2'> 
    <p>hello</p> 
    <script type='text/beforeUpdate'> 
    console.log('hi') 
    </script> 
</template-mini> 

<script> 
    console.log(example1._innerHTML) 
    console.log(example2._innerHTML) 
</script>

我正在開發一個定製的元素稱爲template-minihttps://github.com/zhoukekestar/webcomponents/tree/master/components/template-mini 的方式來獲得充分的innerHTML在createdCallback雖然它有腳本標記

當我使用這個模板，迷你，我需要一個預處理器修改數據或添加一些可以在模板中使用的函數。所以我有一個腳本類型beforeUpdate，不幸的是，我有以下問題：

https://bugs.chromium.org/p/chromium/issues/detail?id=502872

我應該怎麼辦？我想獲得完整的innerHTML（腳本將由我的自定義元素執行）。

來源

2016-11-26 zhoukekestar

有幾種解決方案。

1.如果可以，請在註冊<template-mini>自定義元素之前等待文檔加載。因此，你一定會當createdCallback()被稱爲元素的內容是完全解析：

document.addEventListener('DOMContentLoaded', function() { 
    document.registerElement('template-mini', { prototype: proto }) 
})

2.使用另一張標籤比<script>，例如<script-mini>。無論如何，由於其具體的type屬性，它不會被解釋爲正常的script元素。

可以推遲時間，你會使用這樣的函數setTimeout()或requestAnimationFrame()獲取內容：

proto.createdCallback= function() { 
    setTimeout(function (e) { 
     e._innerHTML = e.innerHTML 
     console.log(e._innerHTML) 
    }, 0, this) 
}

我建議的解決方案2.

來源

2016-11-26 13:20:04 Supersharp

感謝您的意見。這很棒。我現在使用解決方案3。解決方案2也許更好。 Emmm ....現在我有另一個關於我的'template-mini'中的'img'標記的問題。在我將它附加到dom之前，它總是要求一個無效的圖像。在瀏覽器控制檯上執行的代碼將請求無效的img。 'var wrapper = document.createElement（'div'）; wrapper.innerHTML ='''有什麼想法？或者我必須使用像這樣的''' – zhoukekestar

@周柯柯你可以發表另外一個問題揭露這個問題嗎？ – Supersharp

我谷歌它，並得到了一些解決方案：''或''。無論如何感謝〜 – zhoukekestar

的方式來獲得充分的innerHTML在createdCallback雖然它有腳本標記

回答

相關問題