3. Web Components Shadow DOM

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Web Components Shadow DOM

  • G

    Hello,

    I tried to make onsen UI running in a shadow DOM, but got an error from onsen, of “page not found” referring to templates (actually not finding templates by their Id).

    I want to check if this is possible to draw Onsen UI tree in a shadow Dom for the purpose of CSS scoping (preventing external style from linked-in and prevent application file from affecting style of the host page). By default onsen seems to be sensitive to external CSS, set outside of templates.

    If there has been some event that fire after onsen finish the entire rendering procedure this could maybe could help, since can use this event to move the UI dom into shadow. Or maybe I should do something else in order to UI to build in a Shadow DOM?

    Regards,
    Gilad.

    0 1 Reply
  • Onsen UI

    @Gilad-Tiram Hmm, I’ve never tried to do something like that so I’m not sure what kind of problems might appear, but perhaps you can just put the “content elements” in Shadow DOM and let the pages run normally:

    <ons-page>
  <ons-toolbar>...</ons-toolbar>
  <div class="content">
    <my-custom-shadow-content></my-custom-shadow-content>
  </div>
</ons-page>

    Where my-custom-shadow-content is just a custom element that creates a shadow DOM. Not sure if that’s enough for your use case, though.

    Otherwise, just use some CSS naming system like bem or a framework that applies real CSS scoping like Vue (vue-onsenui lib available).

    0