Style elements inside of the shadow DOM of Tecton Components

Question

Hi Any suggestions on the best way to add styles to elements inside of a shadow DOM of a Tecton component For example we re trying to remove the margin on the ul of the tablist when using the q2 tab container Currently we re injecting styles into the shadow root using the following method host is the element that holds the shadow root var style document createElement style style innerHTML the class name property name my value host shadowRoot appendChild style This works but wondering if there s a more streamlined way to do it

Alex Jeong · Answer

Hi David most of Tecton components are styled with css variables which can be overwritten by theme or even with inline styling such as padding gap between tabs and bottom border and so on For instance defining this in your css comp container padding 5px should work to modify the padding of UL tag But it looks like the margin on top and bottom on ul tag in q2 tab container s UL tag has default margin and we don t have a css variable defined for the margin unfortunately So for now your code does the job perfectly with the mannual DOM api javascript but if you need to change other attributes then you should look for a css variables first Let me know if you have any questions Thanks Alex Screen Shot 2022 12 13 at 11 24 59 AM png upload files 1670952701573 Screen 20Shot 202022 12 13 20at 2011 24 59 20AM png

Answers