如何在阴影根中设置内联元素的块显示答案

【问题标题】：How to set block display of inline elements in shadow root如何在阴影根中设置内联元素的块显示
【发布时间】：2015-08-05 09:51:43
【问题描述】：

我在 shadow root 中有几个 <p> 标签，它们是内联代码。当我尝试将它们设置为 display:block 时。它失败了。如何将它们设置为低于其他项目？谢谢。这是我使用的代码：

polyfill-next-selector{content: '.card-header #phone';}
.card-header ::content #phone
{
  display:block;
  font-size: 0.7rem;
}

polyfill-next-selector{content: '.card-header #building';}
.card-header ::content #building
{
  display:block;
  font-size: 0.7rem;
}

polyfill-next-selector{content: '.card-header #office';}
.card-header ::content #office
{
  display:block;
  font-size: 0.7rem;
}

polyfill-next-selector{content: '.card-header #skype';}
.card-header ::content #skype
{
  display:block;
  font-size: 0.7rem;
}

polyfill-next-selector{content: '.card-header #computerName';}
.card-header ::content #computerName
{
  display:block;
  font-size: 0.7rem;
}

polyfill-next-selector{content: '.card-header #businessMobile';}
.card-header ::content #businessMobile
{
  display:block;
  font-size: 0.7rem;
}
</style>
<div class="card-header" layout horizontal center>
  <content select="img"></content>
  <content select="h2"></content>
  <content select="#phone"></content>
  <content select="#building"></content>
  <content select="#office" ></content>
  <content select="#skype" ></content>
  <content select="#computerName" ></content>
  <content select="#businessMobile" ></content>
</div>
<content></content>

【问题讨论】：

请给我们您的代码。
我已经添加了上面的代码。

标签： html css shadow-dom

【解决方案1】：

您需要定位分布在 inside 内容标签中的节点，而不是 ::content 本身。

虽然它们在逻辑上不在内容节点内，但 css 选择器是这样理解的。

所以不是

::content 
{
  display:block;
  font-size: 0.7rem;
}

应该是

::content > p
{
  display:block;
  font-size: 0.7rem;
}

这是一个工作的jsfiddle 也是一样的。

如果您还没有，也可以看看这个漂亮的tutorial 的分布式节点样式。

【讨论】：