Rendering components without the ShadowDOM?

[Sam-Scolari]

I would like to use hybrids for my project but the way I need to structure my web components requires that they do not use the ShadowDOM. I looked through the docs and couldn't find anything on bypassing the ShadowDOM but through further inspection of the code in define.js I noticed a property called content and it calls the render method with useShadow set to false and renders the component without a shadow root. Since I could not find anything in the documentation (I may have missed it somewhere) I wanted to make sure that this was the intended use of the content property and that I wasn't unintentionally breaking anything important by using it instead of render. Thanks.

[smalluban]

Hi @Sam-Scolari. You found it right, the content property is for rendering as children of the element in the "light" DOM. You can find more information about it here in the documentation: https://hybrids.js.org/#/component-model/structure?id=elements-content

As using only the content property is fine for "views", keep in mind that DOM distribution (using <slot> elements), as well as the styling encapsulation, is only supported by the render property. Talking about the latter, you might want to check out the Layout Engine, as it can be used in content, and it generated non-clashing styles.