add example of augmenting HTMLElementTagNameMap to readme (#38)

README.md

@@ -191,19 +191,36 @@ _[Playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAchgTzAUwCY
 
 #### Custom Elements
 
-If you passed an unknown tag, it will fall back to `Element`,
-but you can override it by specifying concrete type.
+If you passed an unknown tag, it will fall back to `Element`.
 
 ```typescript
 import 'typed-query-selector'
 
 document.querySelector('my-web-component') // ==> Element
+```
+
+However, you can override it by specifying a concrete type as a type parameter.
 
+```typescript
 document.querySelector<MyComponent>('my-web-component') // ==> MyComponent
 ```
 
 _[Playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAchgTzAUwCYFoCOBXNKZLAZzQBs0BjGaBAKHo2vIEMo04q2SS4BZZAGEI4CADs04+GgAeMKRj4AJACr8AMgFFKIKfADeAX0YYIVPHukA6fIWQBlCtVpQAFAhDEA7mgBGWFSikJLSCACUcAD0UXAAvHEAfHA6aFYwpuaW+rYERE6UNNAAPIIiYqEwiR5eWL4BQRX6EdGxCcllwRL6QA)_
 
+Alternatively, you can use [global augmentation](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#global-augmentation) and [interface merging](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#merging-interfaces) to extend `HTMLElementTagNameMap` with your custom element.
+
+```typescript
+declare global {
+ interface HTMLElementTagNameMap {
+ 'my-web-component': MyComponent;
+ }
+}
+
+document.querySelector('my-web-component') // ==> MyComponent
+```
+
+_[Playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAchgTzAUwCYFoCOBXNKZLAZzQBs0BjGaBAKHo2vIEMo04q2SS4BZZAGEI4CADs04+GgAeMKRj4AJACr8AMgFFKIKfADeAX0bNu7TgHNyEAEatycA-Tiu4waYQBmrKpzWaOmh60qqslgByrHr8rGBOLm5JCCDEAO5otlhUopCS0ggAXALCuRL6ANyJriYmTBBUeCEwAHT4hMgAyhTUtFAAFCnpmdll+TAIAJRwAPQzcAC8CwB8JSJi40A)_
+
 #### Invalid selector
 
 When passing an invalid selector which causes parsing error,