Initial commit for #279. (#381)

* Initial commit for #279.

* Update index.bs

Co-authored-by: Lea Verou <[email protected]>

* Update index.bs

Co-authored-by: Theresa O'Connor <[email protected]>

* Update index.bs

Co-authored-by: Theresa O'Connor <[email protected]>

* Update index.bs

Co-authored-by: Theresa O'Connor <[email protected]>

* Added counterpattern examples.

* Update index.bs

Co-authored-by: Lea Verou <[email protected]>

Co-authored-by: Lea Verou <[email protected]>
Co-authored-by: Theresa O'Connor <[email protected]>

Author: 3 people

index.bs

@@ -1065,6 +1065,26 @@ Consider adding such features only in cases when the overall user experience is
 A canonical example of this is blocking rendering in order to download and process a stylesheet.
 The alternative user experience is a flash of unstyled content, which is undesirable.
 
+<h3 id="html-idl-must-by-synced">Keep attributes in sync</h3>
+
+New content attributes
+should have a corresponding IDL attribute with the same name,
+and the state between the two should be kept synchronized.
+Carving out a synchronized IDL attribute with inconsistent naming
+results in confusion, and should be avoided.
+
+<div class="note">
+This does not hold the other way around.
+A new IDL attribute does not always warrant a content attribute counterpart.
+</div>
+
+<div class="example">
+A counterpattern to this guidance can be found in
+<{input}>'s  <{input/value}>, <{option}>'s <{option/selected}>, and <{input}>'s <{input/checked}>
+where the HTML attributes were never updated
+and the IDL attribute was the single source of truth.
+</div>
+
 <h3 id="naming-of-url-attributes">Name URL-containing attributes based on their primary purpose</h3><!-- https://github.com/w3ctag/design-principles/issues/278 -->
 
 If the element enables the user to navigate to the URL contained in the attribute, call the attribute `href`, like the <{a}> element's <{a/href}> attribute.