Как я могу наследовать ширину и высоту веб-компонентов своими дочерними элементами?

У меня есть эта кнопка, это веб-компонент bootstrap-social. Я хотел бы установить его display:inline, чтобы кнопка заканчивалась, когда заканчивается ее внутренний текст. Как вы можете видеть на изображении, его высота и ширина равны 0, я бы хотел, чтобы размеры пользовательского элемента были такими же, как у детей. Как это возможно?

<bootstrap-social style="display: inline;"> Не действует.

введите здесь описание изображения


html web-component polymer shadow-dom
person ThomasReggi    schedule 07.08.2014    source источник
comment
Попробовать style="display: inline-block;"?   -  person CletusW    schedule 08.08.2014
comment
@CletusW, это сработало, упс! По какой-то причине я забыл, как css.   -  person ThomasReggi    schedule 08.08.2014
comment
Без проблем. Я сделаю ответ, чтобы вы могли его принять.   -  person CletusW    schedule 08.08.2014
comment
@CletusW это та же проблема? Что тут происходит? stackoverflow.com/questions/25295815/   -  person ThomasReggi    schedule 14.08.2014
comment
Нет, я просто пытался поставить display: inline-block (и block, если на то пошло) на элементы в этом вопросе, и это не помогло.   -  person CletusW    schedule 15.08.2014

Ответы (1)


arrow_upward
11
arrow_downward

Вместо этого используйте style="display: inline-block;". Пользовательские элементы по умолчанию display: inline;.

Примечание. Если вы используете Shadow DOM, вы можете сделать это из своей тени, используя :host:

#shadow-root
  <style>
    :host {
      display: inline-block;  /* or display: block; */
    }
  </style>
  <!-- ... -->

Если вы этого не сделаете, пользователи вашего элемента увидят размер 0px на 0px, как показано на изображении OP, что, вероятно, нежелательно.

person CletusW    schedule 08.08.2014