bug: mat-chip color is not working properly within mat-chip-list & mat-form-field

#### Scenario

I have a simple input field that have an async autocomplete feature in order to add an email of a set of users. The added email will be illustrated in form of mat-chip within a mat-chip-list.

#### Bug
I have in my template an mat-form-field element that conatins a mat-chip-list element.
Within the mat-chip-list element i have also nested elements including the mat-chip element and an input as well as an mat-autocomplete element.

The color input of mat-chip is eql "accent", however the color is correct if i add an element to the list using the matChipInputTokenEnd event. Else, all chip's color are reset to the default one, e.g: if I add an item to the mat-chip-list using the auto complete feature...
This is very strange and therefore i provide the code and a gif below.
PS: selected input is eql `true`.

To confirm that the mat-chip works normally without the combination explained above,
i added a stand alone mat-chip (primary color - indigo) above the mat-chip-list and this works as expected. Furthermore, i added a static mat-chip ("testing") within the mat-chip-list with an accent color. This is not working too!

#### What is the expected behavior?

all chips should be with the color entered --> "accent" !!!

#### What is the current behavior?

#### What are the steps to reproduce?

```html

testing



testing


{{email}}
cancel




{{ user.email }}
({{user.displayName}})



Bitte geben Sie eine gültige E-Mail-Adresse ein




```

```ts
....
@ViewChild('emailsInput') emailsInputElement: ElementRef;

public add(event: MatChipInputEvent): void {
const input = event.input;
const value = event.value;

// Add an email
if ((value || '').trim() && this.validateEmail(value)) {
this.userEmails.push(value.trim());
this.emailsInputElement.nativeElement.value = '';
}
}

public test($event: MatAutocompleteSelectedEvent) {
console.log('on optionSelected: ', $event.option.value);
this.userEmails.push($event.option.value.trim());
this.searchValue = '';
this.emailsInputElement.nativeElement.value = '';
console.log('emails array: ', this.userEmails);
}

public remove(email: any): void {
const index = this.userEmails.indexOf(email);

if (index >= 0) {
this.userEmails.splice(index, 1);
}
}

}

```

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
- Angular v5.2.3
- Material v5.1.0
- OS: MacOS high Sierra
- TS v2.4.2
- Browsers: tested on chrome and firefox (not working!)

#### Is there anything else we should know?


Start by reproducing the reported color reset with the provided mat-chip-list, mat-form-field, input, and mat-autocomplete template on Angular 5.2.3 and Material 5.1.0. Trace the mat-chip color handling for chips added through autocomplete and for the static chip, then verify that every chip remains accent-colored while the standalone chip remains primary.

Written by the indexing model from the issue text.