angular elements components can't inherit dependencies #24824

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:

Current behavior

Having a component inject a service via @Component({providers: [...], ...}) doesn't trickle down to child elements, if the elements are instantiated as web-components via Angular Elements.

Expected behavior

Elements created via Angular Elements should inherit the provided dependencies.

Minimal reproduction of the problem with instructions

Full repo: https://github.com/fr0/angular-elements-test

Summary:

FooComponent is registered with Angular Elements as custom-foo.
BarComponent is registered with Angular Elements as custom-bar.

FooComponent provides a service, ContextProvider. BarComponent needs this service.

The components are instantiated dynamically via web-components in the following manner:

<custom-foo>
  <custom-bar></custom-bar>
</custom-foo>

However, this doesn't work. At runtime, you get an error:

Uncaught Error: StaticInjectorError(AppModule)[BarComponent -> ContextProvider]: 
  StaticInjectorError(Platform: core)[BarComponent -> ContextProvider]: 
    NullInjectorError: No provider for ContextProvider!

What is the motivation / use case for changing the behavior?

I'm using Angular Elements as a way to get dynamic component generation. Having Element Injectors work in this environment is essential for this use case.

Environment

Angular version: 6.0.7


Browser:
- [x] Chrome (desktop) version 67.0.3396.87 (Official Build) (64-bit)