Styles should work with ShadowDOM roots.

[xdumaine]

Is your feature request related to a problem? Please describe.

When using styles inside a shadow root, styles are not applied, because react-native-web attaches styles to the document root

Describe a solution you'd like

Automatically attach styles to the shadow root instead of the document root if one is present. Resolve issues of cascading rules where a shadow root breaks up parents from children.

Describe alternatives you've considered

Avoid having styles compiled into a stylesheet with classes altogether, and have all styles inlined on components.

Additional context

The primary context here is that my react app is rendered inside a custom element, which can be included on anyone else's page as a widget. In order to get style isolation, I must render my app inside a shadow root (natively, or using react-shadow). This gives me proper style isolation from the outer (uncontrolled) application, but it also causes me to lose all of my styles from react-native-web.

[danperkins]

@necolas I was able to get a solution working where I add a style node as a child whenever mounting a new shadow DOM node. After that I added this functionality to createStyleResolver:

var sheets = {};
var savedRules = [];

// Call this when a new shadow DOM node is added passing in the reference to the style sheet
export function addSheet(id, sheet) {
  var orderedSheet = createOrderedCSSStyleSheet(sheet);
  sheets[id] = orderedSheet;
  savedRules.forEach((x) => orderedSheet.insert(x.style, x.group));
  return orderedSheet;
}

// Use this instead of sheet.insert
function insert(style, group) {
  Object.values(sheets).forEach(function(sheet) {
    sheet.insert(style,group);
  });
  savedRules.push({style: style, group: group});
}

I saw that NativeMethodsMixin has an approach for providing a custom style resolver when resolving styles but I couldn't figure out a way to add a custom resolver (or override the default resolver) in the normal createElement flow. If there is an easy way to do this could you point me to it? If not and you have an idea about how the infrastructure could be extended to support this let me know and I would be happy to submit a PR

[xdumaine]

@necolas any chance you could give us some brief thoughts or guidance on this one?

[necolas]

See #2208 for a build that should support ShadowDOM use