html - How to set block display of inline elements in shadow root -


i have few <p> tag in shadow root,they inline codes. when tried style them display:block each. , failed. how set them 1 item below other? thanks. code have used:

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> 

you need target nods distributed inside content tags, instead of ::content itself.

they logically not inside content nodes though, css selectors understand way.

so instead of

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

it should be

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

here working jsfiddle same.

take on nice tutorial on styling distributed nodes also, if haven't already.


Comments

Popular posts from this blog

python - pip install -U PySide error -

arrays - C++ error: a brace-enclosed initializer is not allowed here before ‘{’ token -

cytoscape.js - How to add nodes to Dagre layout with Cytoscape -