Add example about querySelector usage in inherited interfaces.

Author: nojaf

src/DOMAPI/Document.js

@@ -8,7 +8,7 @@ external asHTMLElement: htmlCanvasElement => htmlElement = "%identity"
 external asElement: htmlCanvasElement => element = "%identity"
 external asNode: htmlCanvasElement => node = "%identity"
 external asEventTarget: htmlCanvasElement => eventTarget = "%identity"
-let isInstanceOf = (_: 't): bool => %raw(`param instanceof HTMLCanvasElement`)
+
 /**
 [Read more on MDN](https://developer.mozilla.org/docs/Web/API/HTMLElement/focus)
 */

src/DOMAPI/HTMLCanvasElement.js

@@ -72,12 +72,9 @@ Throws a "HierarchyRequestError" DOMException if the constraints of the node tre
 @send
 external replaceChildren2: (htmlDivElement, string) => unit = "replaceChildren"
 
-/**
-Returns the first element that is a descendant of node that matches selectors.
-[Read more on MDN](https://developer.mozilla.org/docs/Web/API/Document/querySelector)
-*/
-@send
-external querySelector: (htmlDivElement, string) => element = "querySelector"
+include QuerySelector.Impl({
+  type t = htmlDivElement
+})
 
 /**
 Returns all element descendants of node that match selectors.

src/DOMAPI/HTMLCanvasElement.res

@@ -1,6 +1,9 @@
 open Prelude
 open DOMAPI
 
+let isInstanceOfHTMLCanvasElement = (_: 't): bool => %raw(`param instanceof HTMLCanvasElement`)
+let isInstanceOfHTMLDivElement = (_: 't): bool => %raw(`param instanceof HTMLDivElement`)
+
 module Impl = (
   T: {
     type t
@@ -21,16 +24,19 @@ t->querySelector("#myCanvas")
   @send
   external querySelector: (T.t, string) => null<element> = "querySelector"
 
-  let querySelector_htmlCanvasElement = (t: T.t, selector: string): option<htmlCanvasElement> => {
+  let safeQuerySelector = (predicate: T.t => bool, t: T.t, selector: string): option<'return> => {
     let e = querySelector(t, selector)
     switch e {
     | Null.Null => None
-    | Null.Value(e) =>
-      if HTMLCanvasElement.isInstanceOf(e) {
-        Some(unsafeConversation(e))
-      } else {
-        None
-      }
+    | Null.Value(e) => predicate(t) ? Some(unsafeConversation(e)) : None
     }
   }
+
+  let querySelector_htmlCanvasElement = (t: T.t, selector: string): option<htmlCanvasElement> => {
+    safeQuerySelector(isInstanceOfHTMLCanvasElement, t, selector)
+  }
+
+  let querySelector_htmlDivElement = (t: T.t, selector: string): option<htmlDivElement> => {
+    safeQuerySelector(isInstanceOfHTMLDivElement, t, selector)
+  }
 }

src/DOMAPI/HTMLDivElement.js

@@ -1,7 +1,9 @@
 open WebAPI.Global
 
+let myDiv = document->Document.querySelector_htmlDivElement("#myDiv")
+
 let myCanvas: option<DOMAPI.htmlCanvasElement> =
-  document->Document.querySelector_htmlCanvasElement("#myCanvas")
+  myDiv->Option.flatMap(div => div->HTMLDivElement.querySelector_htmlCanvasElement("#myCanvas"))
 
 myCanvas->Option.forEach(myCanvas => {
   let ctx = myCanvas->HTMLCanvasElement.getContext_2D