Added a scoping around the avatar

[silentHoo]

This make it possible to use the <core-drag-drop> element in different other components and style them for each component based on a deep or shadow pseudo selector. This was not possible before this patch, because the global namespace was used with document.body.appendChild(avatar). Now the avatar is appended to the components shadow dom. I think that's much cleaner.

For example, before this you could style the avatar in the following way:

core-drag-avatar {
  border: 1px grey dotted;
  opacity: 0.8;
}

The problem here is that all core-drag-avatars are equally styled.

Now you can use it in this way (when you want to style it globally):

html /deep/ core-drag-drop::shadow core-drag-avatar {
  border: 1px grey dotted;
  opacity: 0.8;
}

Or you can use it in sub-components that make use of <core-drag-drop>:

core-drag-drop::shadow core-drag-avatar {
  border: 1px grey dotted;
  opacity: 0.8;
}

[silentHoo]

Nobody commenting?

[googlebot]

Thanks for your pull request.

It looks like this may be your first contribution to a Google open source project, in which case you'll need to sign a Contributor License Agreement (CLA) at https://cla.developers.google.com/.

If you've already signed a CLA, it's possible we don't have your GitHub username or you're using a different email address. Check the information on your CLA or see this help article on setting the email on your git commits.

Once you've done that, please reply here to let us know. If you signed the CLA as a corporation, please let us know the company's name.