Custom elements not sizing properly

I've created a custom element to handle some data passing, which it does perfectly. At this point, I'd like to add some styling to enable my custom elements to act kind of like divs. Specifically, I've got a table in one of them, and I don't want it growing down the page as I add data to it.

Right now, my html looks kind of like this:

<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>

I'd like to style it so that I can specify something like this css:

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

The problem is that the custom elements don't seem to size to fit around their contents, so nothing with height or overflow is affecting them.

Fiddle.

Solution

Just style it like any other element. Your CSS syntax is invalid.

Try this:

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

My own working sample: http://jsfiddle.net/ynreuka1/

UPDATE: Your custom element is not a block level element. Add display:block; and then it works:

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

Yet another update, with specific dimensions and scrollbars:

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