I create and use a web component.

and I give a little style to the web component. After that, the web component always injects its own style into the shadow root.

This is the code.

 <custom-element style="width: 50%; border: 1px solid red" />

And I can see this dom structure in elements tab of devTool

 <custom-element style="width: 50%; border: 1px solid red">
 #shadow-root
 <div style="width: 50%; border: 1px solid red">
 ~~~~
 </div>
</custom-element>

But I want to style only the custom element. Or give a style just for the shadow root. How can I do this?