Allow opt-ining into using `ShadowRoot` while rendering `Component`s

[cheng-alvin]

Hello! This is an issue for tracking the development and progress for implementing opt-ins for rendering using a ShadowRoot. Please see below for more information about the implementation and design documentation and information regarding this.

✨Design documentation✨

This feature would implement a new attribute placeholder for allowing opt-ins when using a ShadowRoot to render components. The shadow root allows for implementing standalone components. However, we can allow the framework to offer a feature to opt-in optionally when using a shadow root. Please note that you can find more information on this topic in the sources below.

Sample usage 👨‍💻

To use this feature that's to be implemented, I'll just implement an attribute that provides input to the component that allows for manupulation of the variable. Please see example syntax below.

Syntax:

<!-- ... -->
<durian-component name="my-component" useShadow="true">
  <p>Hello world</p>
</durian-component>
<!-- ... -->

In the code above, this component would NOT use the shadow root as a render.

Implementation 🔨

For implementing this feature, we could just simply implement this in the @durian.js/core package and uses the document.getAttribute() to get the useShadow prop/attribute. Nice and simple 🥰🥰🥰!

Other sources 📖

• https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot
• https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute
• https://www.w3schools.com/jsref/met_element_getattribute.asp

[cheng-alvin]

Development is now in progress! Please see #14

[cheng-alvin]

As mentioned in #14, this feature can be problematic and annoying to deal with in the future, therefore, this would now be closed.