This is an archived snapshot of W3C's public bugzilla bug tracker, decommissioned in April 2019. Please see the home page for more details.

Bug 23625 - [Shadow]: Consider removing apply-author-styles flag
Summary: [Shadow]: Consider removing apply-author-styles flag
Status: RESOLVED FIXED
Alias: None
Product: WebAppsWG
Classification: Unclassified
Component: HISTORICAL - Component Model (show other bugs)
Version: unspecified
Hardware: PC All
: P2 normal
Target Milestone: ---
Assignee: Hayato Ito
QA Contact: public-webapps-bugzilla
URL:
Whiteboard:
Keywords:
Depends on:
Blocks: 14978
  Show dependency tree / graph
 
Reported: 2013-10-24 22:21 UTC by Dimitri Glazkov
Modified: 2014-01-15 06:46 UTC (History)
6 users (show)

See Also:

Attachments

Description Dimitri Glazkov 2013-10-24 22:21:05 UTC 
All developers I know who tried apply-author-styles told me that the flag is useless because of the weird "either match wholly inside or outside" rule and is very unlikely to be used in real life.

I think we should try removing it from the spec.
Comment 1 Eric Bidelman 2013-11-25 16:49:03 UTC 
I didn't realize this was going away too. Does ^ && ^^ fully replace shadow dom styling? Isn't it still convenient to have components take on the look and feel of their embedding page. applyAuthorStyles does that without much hassle.
Comment 2 Elliott Sprehn 2013-11-25 17:10:09 UTC 
@ericbidelman 

I think we might want some kind of similar feature eventually, but the current version of it does surprising things like applying all styles from all ancestor ShadowRoots down into you which is harmful to the concept of encapsulation and also breaks composition.

ex.

Document (includes bootstrap.css)
|
| <app-panel>
   |
   |
   --> ShadowRoot
       |
       | <style> span { font-size: 2em; } </style>
       |
       | <bootstrap-button> with applyAuthorStyles = true.
          |
          |
          --> ShadowRoot
              |
              | <span><content></content></span>

In this example the <bootstrap-button> has applyAuthorStyles since it assumes that you'll just put the bootstrap CSS at the top of your page. Unfortunately setting that flag also makes the CSS of the containing ShadowRoot apply making the text inside the button huge. This is not what the developer intended, they just wanted bigger text for the spans inside the <app-panel>.

^ and ^^ are explicit about what they match and give the author of the component control while applyAuthorStyles requires the author to worry about the internal structure of every nested 3rd party component just in case one of them uses applyAuthorStyles.

Having this flag is harmful to the ecosystem, it encourages brittle wrappers around existing libraries that won't work with each other.