Пользовательские элементы имеют неправильный размер

Я создал пользовательский элемент для обработки передачи некоторых данных, и он отлично справляется. На данный момент я хотел бы добавить некоторые стили, чтобы мои пользовательские элементы вели себя как 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 на них не влияет.

Скрипт.


javascript html css custom-element
person ckersch    schedule 02.10.2014    source источник
comment
Нет необходимости в 's в css.   -  person i alarmed alien    schedule 03.10.2014
comment
Слишком привык к стилю в javascript :) Исправил css и добавил скрипку на основе ответа @HakurHaf.   -  person ckersch    schedule 03.10.2014

Ответы (1)


arrow_upward
1
arrow_downward

Просто стилизуйте его, как любой другой элемент. Ваш синтаксис CSS недействителен.

Попробуй это:

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

Мой собственный рабочий образец: http://jsfiddle.net/ynreuka1/

ОБНОВЛЕНИЕ. Ваш пользовательский элемент не является элементом уровня блока. Добавьте display:block; и тогда все заработает:

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

Еще одно обновление с определенными размерами и полосами прокрутки:

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

person HaukurHaf    schedule 02.10.2014
comment
Я предполагаю, что у меня другая проблема, чем у меня. Проблема заключается в том, что размер пользовательских элементов не соответствует их содержимому, и, следовательно, любые полосы прокрутки не работают. Я изменил вашу скрипту, и она показывает эту проблему: jsfiddle.net/ynreuka1/1 - person ckersch; 03.10.2014