Clarify/refine Local Effects

[JanMiksovsky]

Breaking out this feedback from @arkihillel in #10:

Local Effects — Does the component limit its effects to itself (or a designated target element)?

This rule is not very clear. Does an overlay affect over elements?

The intent is more about programmatic manipulation of other elements rather than visual effects. An overlay may appear on top of other elements but leave them otherwise alone, in which case (in my mind) it would pass this criteria. My concern is more with components that manipulate other elements, typically their parent elements or sibling elements in some unexpected way. E.g., they might change styles on another element outside their local DOM tree, or add or remove subelements.

This criteria does not mean that such techniques are necessarily awful, just that they're surprising and deviate from developer expectations set by the examples of the native elements. So, if a component wants to meet the Gold Standard, it should avoid those techniques.

If that clarifies things a bit, I (or anyone else) could expand the page for Local Effects. If there's more to discuss here, though, let me know.

[arkihillel]

It is much clearer!

Some components like Polymer's paper-dialog would not meet the Gold Standard according to this definition though, because it order to achieve its drop shadow it insert a new node to the root of the document. Which indeed makes the component act outside of its expected scope and hijacks the "clickability" of all the elements beneath if