0

我创建了一个自定义元素来处理一些数据传递，它做得很好。在这一点上，我想添加一些样式以使我的自定义元素能够像 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影响它们。

小提琴。

4

1 回答 1

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/

于 2014-10-02T22:16:33.840 回答