vue-a11y · jairovg · Jul 8, 2022 · Jul 8, 2022 · Jul 8, 2022
diff --git a/demo/public/index.html b/demo/public/index.html
@@ -5,7 +5,6 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body>
     <noscript>

diff --git a/demo/src/main.js b/demo/src/main.js
@@ -4,7 +4,9 @@ import App from './App.vue'
 import router from './router'
 
 // Use this plugin only development => if (process.env.NODE_ENV === 'development')
-Vue.use(VueAxe)
+Vue.use(VueAxe, {
+  element: '#app'
+})
 Vue.config.productionTip = false
 
 new Vue({

diff --git a/demo/src/views/Home.vue b/demo/src/views/Home.vue
@@ -132,7 +132,8 @@ export default {
 
     handleManualButton () {
       this.$axe.run({
-        clearConsole: true
+        clearConsole: true,
+        element: document
       })
     }
   }

diff --git a/docs/guide/api.md b/docs/guide/api.md
@@ -11,7 +11,7 @@ To execute the `$axe.run` method to check manually your document or any desired
 | Key           | Type                     | Default 
 | ------------- | ------------------------ | ----------------------------------
 | clearConsole  | Boolean                  | The same as `clearConsoleOnUpdate`
-| element       | Document or HTMLElement  | `document`
+| element       | Document or HTMLElement  | `element` from [options](/guide/options.html#element) or `document`
 | label         | Strong                   | `Run manually`
 
 ```js

diff --git a/docs/guide/options.md b/docs/guide/options.md
@@ -96,6 +96,24 @@ Learn more about [Axe-core runtime options](https://github.com/dequelabs/axe-cor
 
 Used only to delay the first check.
 
+## element
+
+| Type     | Default  |
+| -------- | -------- |
+| String   | `null`   |
+
+A [CSS selector](https://github.com/dequelabs/axe-core/blob/develop/doc/developer-guide.md#supported-css-selectors) that selects the default portion of the document to be analyzed. Once it's set up, it's used with manually checks using [$axe.run](/guide/api.html#run).
+
+```js
+Vue.use(VueAxe, {
+  element: '#app'
+})
+```
+
+::: tip
+Even the CSS selector accepts `Document` or `HTMLElement` objects; if the `querySelector` is used before the page loads, an empty object may be registered, causing undesired behaviour
+:::
+
 ## style
 
 | Type     |

diff --git a/src/audit.js b/src/audit.js
@@ -11,7 +11,7 @@ export function checkAndReport (options, node, label) {
   const deferred = createDeferred()
   style = { ...options.style }
 
-  axeCore.run(node || document, options.runOptions, (error, results) => {
+  axeCore.run(node || options.element || document, options.runOptions, (error, results) => {
     if (error) deferred.reject(error)
     if (results && !results.violations.length) return
     if (JSON.stringify(results.violations) === lastNotification) return

diff --git a/src/index.js b/src/index.js
@@ -48,5 +48,5 @@ export default function install (Vue, options = {}) {
   })
 
   // First check
-  setTimeout(() => draf(() => checkAndReport(options, document, 'App')), options.delay)
+  setTimeout(() => draf(() => checkAndReport(options, null, 'App')), options.delay)
 }
diff --git a/src/utils.js b/src/utils.js
@@ -7,6 +7,7 @@ export const defaultOptions = {
   allowConsoleClears: true,
   clearConsoleOnUpdate: false,
   delay: 500,
+  element: null,
   config: {
     branding: {
       application: 'vue-axe'