自定义元素没有正确确定

我创建了一个自定义元素来处理一些数据传递，它完美地完成了。在这一点上，我想添加一些样式来使我的自定义元素具有像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

自定义元素没有正确确定

回答

相关问题