Re: [webcomponents] Sharing styles across custom elements (#282)

@varunkumar, fwiw, I hit the exact same problem with font awesome. Custom properties don't help here, but the solution is not to `/deep/` all the CSS icons either. What's needed is a more modular font awesome and better tooling in producing/consuming them - so that a Web Component can still be self-contained. To reuse common styles, I think ideally a component stylesheet would use the standard `@import`:

```css
@import 'fa-circle'
```

There may be a little repetition, but it's better for the component to declare exactly what it needs rather than assuming it will be there. The browser can deal with caching and optimise the problem of not fetching a duplicate stylesheet more than once.

Until `@import` is natively  supported in Shadow DOM, this can be smoothed over and solved at the framework level (https://github.com/rijs/precss/issues/1) - i.e. simply reading `@import`'s, fetching styles and idempotently prepending `<style>` tags.

---
Reply to this email directly or view it on GitHub:
https://github.com/w3c/webcomponents/issues/282#issuecomment-142110870