Inline stylesheet in adder Shadow DOM conflicts with strict CSP policies

[robertknight]

In browsers that support Shadow DOM, the client uses an inline stylesheet to apply styling to the adder because <link> elements are not officially supported in shadow roots (see WICG/webcomponents#530 for lengthy discussion).

This will conflict with sites that employ a strict CSP policy that disallows inline styles.

We have a few options:

1. Chrome does support stylesheets in Shadow DOM and it looks like that support will make its way to other browsers in future, so we could feature-detect that as criteria for enabling the SD path.
2. We could alternatively switch adder rendering to use only inline styles applied using CSSOM methods in JavaScript.
3. The dumbest option which might just work is to use custom elements for everything inside the adder. This would require a bunch of work to get the accessibility features that normal HTML elements afford us.

[robertknight]

Some notes on a few things I've learned while experimenting with different options for this:

1. External stylesheets (via <link>) work in shadow roots in Chrome >= 54 and the latest Safari Tech Preview, but not earlier versions of Chrome or Safari 10 (the stable version of Safari).
2. You can feature detect support for external stylesheets and <style> tags in Shadow DOM by testing for a non-null element.sheet property of a <link> or <style> element.
3. Rules can be added to stylesheets via CSSOM methods (ie. styleElement.sheet.insertRule) without violating inline style CSP restrictions. However, to use that you have to have a <style> element in the shadow root in the first place, which is a problem because...
4. Browser APIs don't provide a means to construct stylesheets programatically at the moment, instead you have to create a <style> element and append it to the document, which does violate inline style CSP restrictions - unless a CSP hash or nonce has been used to whitelist the element
5. Once a shadow root has been attached to an element, there isn't currently a method that you can call to detach it. This is a problem if we create the shadow root and then find that it cannot be styled. In theory it should be possible to make an element with a shadow root render as if it didn't have one by setting the shadow root's innerHTML to <slot></slot> except...
6. That works in Chrome but not Safari 10, where the adder animation fails to run in that case.

[robertknight]

Fixed in 1d2eaf6 by switching to external stylesheets for shadow DOM roots.