自定義元素沒有正確確定

我創建了一個自定義元素來處理一些數據傳遞，它完美地完成了。在這一點上，我想添加一些樣式來使我的自定義元素具有像div一樣的行爲。具體來說，我在其中一個表中有一個表格，並且我不希望它隨着向其中添加數據而向下擴展。自定義元素沒有正確確定

現在，我的HTML看起來有點像這樣：

<head> 
    <script> 
    var myProto = Object.create(HTMLElement.prototype); 
    myProto.method = function(){}; 

    document.register('my-element', {prototype: myProto}); 
    </script> 
</head> 
<body> 
    <my-element> 
    <table> 
     <tr><td>Foo</td><td>Bar</td><tr> 
     <tr><td>Foo</td><td>Bar</td><tr> 
     <tr><td>Foo</td><td>Bar</td><tr> 
     <tr><td>Foo</td><td>Bar</td><tr> 
    </table> 
    </my-element> 

    <script>/*Other Code*/</script> 
</body>

我想它的樣式，這樣我可以像這樣的CSS指定的東西：

my-element{ 
    height : 200px; 
    overflow-x : scroll; 
}

的問題是，自定義元素的大小似乎不適合其內容，因此height或overflow沒有影響它們。

Fiddle.

來源

2014-10-02 ckersch

無需爲的在CSS。 – 2014-10-02 22:16:31

太習慣於在javascript中設置樣式:)修正了css，並根據@HakurHaf的答案添加了小提琴。 – ckersch 2014-10-02 22:26:16

只是風格它像任何其他元素。你的CSS語法無效。

試試這個：

my-element { 
    height:200px; 
    overflow-x:scroll; 
}

我自己的工作示例： http://jsfiddle.net/ynreuka1/

UPDATE：您的自定義元素不是塊級元素。添加display:block;，然後它的工作原理：

http://jsfiddle.net/ynreuka1/3/

另一個更新，具體尺寸和滾動條：

http://jsfiddle.net/ynreuka1/4/

來源

2014-10-02 22:16:33 HaukurHaf

我想我有一個與我不同的問題。問題似乎是自定義元素不適合其內容，因此任何滾動條都不起作用。我修改了你的小提琴，它顯示了這個問題：http://jsfiddle.net/ynreuka1/1/ – ckersch 2014-10-02 22:22:42

我剛剛更新了我的答案，看看。 – HaukurHaf 2014-10-02 22:26:24

真棒，完美工作。 – ckersch 2014-10-02 22:33:14

自定義元素沒有正確確定

回答

相關問題