Is there a way to make a custom element in angular 8 (or 9) without using the shadow DOM?

Question

Looking at Angular Elements docs, it shows how to create an encapsulated sharable component using the shadow DOM (i.e. web components), but my company has a global styles guide, so we need all components to have the same styles. How can we create custom elements in Angular without the encapsulation (i.e. HTMLElement) and be able to share them throughout the organization?

Answer 1

TLDR;
Yes - in fact it is the default, just don't use encapsulation: ViewEncapsulation.ShadowDom.

Stackblitz Example

Some detail
Don't get confused by the many specifications that are involved in web components. When talking from a web component, normaly we assume it has style encapsulation, because it uses the Shadow DOM, but this is not mandatory.

Angular uses custom elements to encapsulate a self bootstrapping Angular component. This Angular component per default doesn't use the Shadow DOM, unless you explictly defined so with encapsulation: ViewEncapsulation.ShadowDom.
So the default is just a custom element and this can be perfectly styled with global CSS.