diff --git a/README.md b/README.md
index e69ece0f..85a2d613 100644
--- a/README.md
+++ b/README.md
@@ -162,7 +162,8 @@ a `disabled` attribute.
According to the specification, the following elements can be
[actually disabled](https://html.spec.whatwg.org/multipage/semantics-other.html#disabled-elements):
-`button`, `input`, `select`, `textarea`, `optgroup`, `option`, `fieldset`.
+`button`, `input`, `select`, `textarea`, `optgroup`, `option`, `fieldset`, and
+custom elements.
#### Examples
diff --git a/src/__tests__/to-be-disabled.js b/src/__tests__/to-be-disabled.js
index db0cde56..f7c95029 100644
--- a/src/__tests__/to-be-disabled.js
+++ b/src/__tests__/to-be-disabled.js
@@ -1,5 +1,13 @@
+import document from './helpers/document'
import {render} from './helpers/test-utils'
+const window = document.defaultView
+
+window.customElements.define(
+ 'custom-element',
+ class extends window.HTMLElement {},
+)
+
test('.toBeDisabled', () => {
const {queryByTestId} = render(`
@@ -109,6 +117,23 @@ test('.toBeDisabled fieldset>legend', () => {
expect(queryByTestId('outer-fieldset-element')).toBeDisabled()
})
+test('.toBeDisabled custom element', () => {
+ const {queryByTestId} = render(`
+
+
+ `)
+
+ expect(queryByTestId('disabled-custom-element')).toBeDisabled()
+ expect(() => {
+ expect(queryByTestId('disabled-custom-element')).not.toBeDisabled()
+ }).toThrowError('element is disabled')
+
+ expect(queryByTestId('enabled-custom-element')).not.toBeDisabled()
+ expect(() => {
+ expect(queryByTestId('enabled-custom-element')).toBeDisabled()
+ }).toThrowError('element is not disabled')
+})
+
test('.toBeEnabled', () => {
const {queryByTestId} = render(`
@@ -241,3 +266,20 @@ test('.toBeEnabled fieldset>legend', () => {
expect(queryByTestId('outer-fieldset-element')).toBeEnabled()
}).toThrowError()
})
+
+test('.toBeEnabled custom element', () => {
+ const {queryByTestId} = render(`
+
+
+ `)
+
+ expect(queryByTestId('disabled-custom-element')).not.toBeEnabled()
+ expect(() => {
+ expect(queryByTestId('disabled-custom-element')).toBeEnabled()
+ }).toThrowError('element is not enabled')
+
+ expect(queryByTestId('enabled-custom-element')).toBeEnabled()
+ expect(() => {
+ expect(queryByTestId('enabled-custom-element')).not.toBeEnabled()
+ }).toThrowError('element is enabled')
+})
diff --git a/src/to-be-disabled.js b/src/to-be-disabled.js
index 9efe6f98..484437ad 100644
--- a/src/to-be-disabled.js
+++ b/src/to-be-disabled.js
@@ -36,8 +36,17 @@ function isElementDisabledByParent(element, parent) {
)
}
+function isCustomElement(tag) {
+ return tag.includes('-')
+}
+
+/*
+ * Only certain form elements and custom elements can actually be disabled:
+ * https://html.spec.whatwg.org/multipage/semantics-other.html#disabled-elements
+ */
function canElementBeDisabled(element) {
- return FORM_TAGS.includes(getTag(element))
+ const tag = getTag(element)
+ return FORM_TAGS.includes(tag) || isCustomElement(tag)
}
function isElementDisabled(element) {