Вопросы Styling: хозяин в угловых 2

Question

[Edited, чтобы лучше описать проблему]

Я с трудом применяя различные стили: хоста в угловых 2. Простой plunker ниже демонстрирует проблему. Сначала я думал, что некоторые стили, такие как margin/padding, не применяются, но кажется, что проблема заключается в том, что элемент host не ведет себя как обычный элемент. Обратите внимание, что я добавил границу и дополнение. . Граница выглядит очень странной и обивка не перемещает содержимое внутри элемента на всех (хотя это действительно кажется, влияет на то, как выглядит граница Это стиль, который я подаю заявление:

:host {padding:10px; border:1px solid red;} 

Визуализированным код выглядит следующим образом:

<sample-component _nghost-cxm-2=""> 
    <div _ngcontent-cxm-2=""> 
    <h3 _ngcontent-cxm-2="">Sample Component</h3> 
    </div> 
</sample-component> 

я могу видеть в Дев инструментов, стили которые применяются к <sample-component> элемента, но это то, что страница выглядит как оказывается:

Я бы ожидал, что граница обернет содержимое внутри компонента, но он ведет себя странно. Вот пример плунжера: https://plnkr.co/edit/k7LJcmVlhJINmakBJAau?p=preview

Что мне не хватает?

Answer 1

Я просто понял, что проблема есть. Элементы хоста установлены на display:inline. Изменение элемента на display:block устраняет проблему. Не знаю, как я пропустил это раньше.

Answer 2

Я уже показал вам, что ваш плукер работает. Кроме этого вы можете использовать host metaproperty применить стиль для размещения элемента, как показано ниже,

https://plnkr.co/edit/7JquAioc6lUx9bUrPCiZ?p=preview

UPDATE после редактирования:

Я не могу дать вам точный ответ но есть некоторая проблема с элементом/тегом <sample-component>, который создается в DOM. Возможно, я понимаю, чего вы пытаетесь достичь. У меня есть обходное решение для того же самого.

взгляд на здесь - https://plnkr.co/edit/yLLsZABJWCrvE0CWHgFy?p=preview