Is there any way to edit CSS/JS of WebComponent?

Question

I am a web developer and recently started working with Ionic 4 which is based on Web Component. I was trying to edit the CSS of the components but I was not able to edit the same and later on figured out that it was because of Web-Components which do have #shadow-root.

My Question is, Is there any way to edit the CSS and JS of a Web Component. If not, why is it there?

The drawbacks of the same according to me are: - Not able to apply the custom CSS into the child components of the Component. - Plugins like Stylus will be useless as the CSS won't be applied and we won't be able to get the dark mode.

Answer 1

The Component Author decides the level of styling that can be applied.

When there is no #shadow-root

• All global CSS applied
• all children are part of the main document DOM

With ShadowDOM created with this.attachShadow({mode:"open"})

• No global CSS applied
• Inheritable styles are applied (font, color, etc.)
• CSS Properties (if used by the Component author) are applied
• part definitions (set by author) can be styled with global CSS
• You can access the shadowRoot and overwrite everything inside
  (its like buying an IKEA table and putting a saw in it)

shadowDOM created with this.attachShadow({mode:"closed"})

• as above
• BUT You can not access the shadowRoot

Documentation

source: https://developers.google.com/web/fundamentals/web-components/shadowdom

TL;DR

Shadow DOM removes the brittleness of building web apps. The brittleness comes from the global nature of HTML, CSS, and JS. Over the years we've invented an exorbitant number of tools to circumvent the issues. For example, when you use a new HTML id/class, there's no telling if it will conflict with an existing name used by the page. Subtle bugs creep up, CSS specificity becomes a huge issue (!important all the things!), style selectors grow out of control, and performance can suffer. The list goes on.

Shadow DOM fixes CSS and DOM. It introduces scoped styles to the web platform. Without tools or naming conventions, you can bundle CSS with markup, hide implementation details,
and author self-contained components in vanilla JavaScript.

Read all about styling components:

• https://developers.google.com/web/fundamentals/web-components/shadowdom#styling

• (not a standard yet) https://developers.google.com/web/updates/2019/02/constructable-stylesheets