I'm working on a generic web component, wrapping a jquery based grid library with Polymer. I'm finding that the custom themes that come with the library work fine if I use the default shady DOM global setting, but will need significant adjustments to make them work when using shadow DOM.
The question is how best to support both?
Naively, I would want something like this pseudo markup to work:
<link if="shadowDom" rel="import" href="css/shadowDomStyles.html">
<dom-module id="my-grid">
<template>
<link if="shadyDom" rel="stylesheet" href="css/shadyDomStyles.css" type="text/css"/>
<style if="shadowDom" include="shadow-dom-styles"></style>
</template>
</dom-module>
And I would want only the files needed as specified by the global setting, so shadyDomStyles.css would not be requested if shadow dom is enabled, and shadowDomStyles.html would not be requested if shady dom is enabled.
Any suggestions?