Re: [WICG/webcomponents] Web components should be able to easily adapt to the host page while maintaining enapsulation (Issue #986)

Just to throw this idea out:

```html
<my-component>
   <template shadowrootmode="open">
      <style>
         /* Basic case */
         button { all: outside }
         /* Inside of the form element, just pull in outside styles, like if it was slotted */
         @scope (form) to (whatever-nested-component) {
            * { all: outside }
          }
          a { color: red; font-size: outside; }
      </style>
   </template>
   <button>Do Things</button>
   <a class="fancy-link">Wouldn't want ANY outside styles messing with this super complex link styling (Except the font size, that's fine)</a>
   <form>
      <!-- some form controls here -->
   </form>
</my-component>
```

Needless to say, `outside` is just the first thing that came to mind, but that's one way I could imagine this to work that would be comfortable in my typical use-cases.

@LeaVerou Copying in all styles has had its problems here and there and we've had to find many work-arounds, which would still be the case with `open-stylable`. That one seems like a good first step, but I also think a more fine-tunable solution would be best.

-- 
Reply to this email directly or view it on GitHub:
https://github.com/WICG/webcomponents/issues/986#issuecomment-1446940530

You are receiving this because you are subscribed to this thread.

Message ID: <WICG/webcomponents/issues/986/1446940530@github.com>