Web組件：繼承DOM原型

當前開發的Web組件規範的一部分是，人們可以創建自己的HTML元素，例如，通過調用新的document.register。一個例子是在這裏給出：https://github.com/mozilla/web-components/blob/master/demo/demo.html Web組件：繼承DOM原型

如可以看到的，一個新的x-bar元件由具有其原型從HTML跨度元件的原型被繼承創建。

現在我試着在Firefox每晚以下（含document.register支持，順便說一句）：我一直在想，這將是在延長/自定義的行爲或外觀的第一步

var x = Object.create(HTMLInputElement.prototype);

普通input元素。

但是，當我運行諸如x.value之類的東西時，瀏覽器的Javascript引擎會拋出一個TypeError: Value does not implement interface HTMLInputElement。

現在我有點卡住了。它是當前實現還是規範的限制？

來源

2013-05-07 Marc

下面的兩個答案對我瞭解自定義元素如何擴展現有元素類型以及如何對這種行爲進行多邊填充非常有幫助。由於我只能接受一個答案，我不得不作出選擇。我接受了csuwldcat的回答，因爲他給了我Firefox的預發佈版本實際上已經壞掉的提示（其奇怪的行爲是我最初的問題基本歸結爲什麼）。 – Marc 2013-05-15 08:46:28

你有這樣的煩惱馬克，究其原因是因爲當你從繼承現有的本地元素來創建新的自定義元素，你需要使用的document.register(TAG_NAME, OPTIONS)選項extends屬性對象在期望的變量傳遞你想繼承的名字。

要使用新的本地繼承自定義元素，在標記中聲明式地寫出元素時需要使用is=""語法 - 儘管使用JS，它就像創建任何其他元素一樣 - 下面的示例。下面是這兩個polyfills，給他們一個嘗試，讓我知道它是如何工作的：Mozilla的 - https://github.com/mozilla/web-components/blob/master/src/document.register.js - 谷歌：https://github.com/toolkitchen/CustomElements

定義&註冊

document.register('x-input', { 
    extends: 'input', 
    prototype: Object.create(HTMLInputElement.prototype, { ... }) 
});

在HTML中使用

<input is="x-input" />

通過JavaScript/DOM的使用情況

document.createElement('x-input')

來源

2013-05-14 15:26:10 csuwldcat

感謝您的輸入！我目前正在嘗試。您的代碼可以與當前穩定版本的Firefox一起使用您的polyfill。但是，帶有自己的document.register的Firefox的主幹版本仍然不起作用。（因爲document.register已經存在，所以我猜這個polyfill在這種情況下什麼也不做） – Marc 2013-05-14 18:08:56

你的例子也可以在Chrome 28中使用document.webkitRegister並且沒有任何polyfill，這在最新的Firefox中看起來像是一個不恰當的實現。 – Marc 2013-05-14 18:37:05

@Marc yup，在Firefox的預發佈版本中提供的document.register（）的早期實現非常陳舊，並且不能正常工作 - 但會很快更新（現在我們正在完成規範）。當您打開Firefox預發佈版本中的Web組件的pref時，它會添加舊版本，X-Tags嘗試使用（作爲一個polyfill應該），並顯示爲結果。但是，如果禁用它，我們的document.register（）填充和X-Tag在Firefox中可以正常工作。 – csuwldcat 2013-05-14 20:28:12

我不能到X標記填充工具的細節說話document.register()，但是這是什麼看起來像一個本地的實現是這樣的：

<script> 
    var XFooProto = Object.create(HTMLInputElement.prototype); 

    // Define its JS API. 
    XFooProto.showVal = function() { 
    alert(this.value); 
    }; 

    var XFoo = document.webkitRegister('x-foo', {prototype: XFooProto}); 

    var xfoo = document.createElement('input', 'x-foo'); 
    xfoo.value = 50; 

    xfoo.addEventListener('click', function(e) { 
    e.target.showVal(); 
    }); 

    document.body.appendChild(xfoo); 
</script>

這example作品在Chrome金絲雀28。您目前需要在about:flags中翻轉的「啓用實驗性WebKit功能」標誌才能獲得document.webkitRegister()。

我懷疑如果你做了類似的FF填充，事情可能會奏效。如果您有興趣使用<element>和/或使用其他Web組件規範創建自定義元素，則還可以在https://github.com/toolkitchen處查看polyfills。

來源

2013-05-07 23:57:39 ebidel

請注意，我的問題與x-polyfill本身無關;我只是用他們的演示代碼來激勵。 – Marc 2013-05-10 09:46:15

我試過你的例子，它在Firefox Trunk中不起作用，因爲xfoo只是一個普通的輸入元素。事實上，在你的代碼中，你正在通過調用createElement來創建xfoo，它接收'input'作爲它的第一個參數。是不是第二個參數'x-foo'簡單地被忽略，因爲createElement只是爲一個元素定義的？ – Marc 2013-05-10 09:48:41

好吧，讓你的例子在Chrome 28中工作，這顯然是尊重document.createElement的第二個參數。順便說一下，這是有記錄的地方嗎？ – Marc 2013-05-14 18:26:44

Web組件：繼承DOM原型

回答

相關問題