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
Post a Comment