Question

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

Answer 1

只需像任何其他元素一样设置样式。您的CSS语法无效。

试试这个：

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

我自己的工作样本： http://jsfiddle.net/ynreuka1/

更新：您的自定义元素不是块级元素。添加display:block;，然后就可以了：

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

另一个更新，具有特定尺寸和滚动条：

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

自定义元素没有正确调整大小

1 个答案: