diff --git a/lib/rules/no-unknown-property.js b/lib/rules/no-unknown-property.js
index 18634951c3..6b4c87ec4c 100644
--- a/lib/rules/no-unknown-property.js
+++ b/lib/rules/no-unknown-property.js
@@ -147,7 +147,8 @@ function getDOMPropertyNames(context) {
// ------------------------------------------------------------------------------
/**
- * Checks if a node matches the JSX tag convention.
+ * Checks if a node matches the JSX tag convention. This also checks if a node
+ * is extended as a webcomponent using the attribute "is".
* @param {Object} node - JSX element being tested.
* @returns {boolean} Whether or not the node name match the JSX tag convention.
*/
@@ -194,7 +195,7 @@ function tagNameHasDot(node) {
* Get the standard name of the attribute.
* @param {String} name - Name of the attribute.
* @param {String} context - eslint context
- * @returns {String} The standard name of the attribute.
+ * @returns {String | null} The standard name of the attribute, or null if no standard name was found.
*/
function getStandardName(name, context) {
if (DOM_ATTRIBUTE_NAMES[name]) {
@@ -205,11 +206,11 @@ function getStandardName(name, context) {
}
let i = -1;
const names = getDOMPropertyNames(context);
- const found = names.some((element, index) => {
- i = index;
- return element.toLowerCase() === name;
- });
- return found ? names[i] : null;
+ // Let's find a possible attribute match with a case-insensitive search.
+ const foundName = names.find(
+ (element, index) => element.toLowerCase() === name.toLowerCase()
+ );
+ return foundName === undefined ? null : foundName;
}
// ------------------------------------------------------------------------------
@@ -259,6 +260,8 @@ module.exports = {
}
const tagName = getTagName(node);
+
+ // 1. Some attributes are allowed on some tags only.
const allowedTags = ATTRIBUTE_TAGS_MAP[name];
if (tagName && allowedTags && /[^A-Z]/.test(tagName.charAt(0)) && allowedTags.indexOf(tagName) === -1) {
context.report({
@@ -272,8 +275,12 @@ module.exports = {
});
}
+ // 2. Otherwise, we'll try to find if the attribute is a close version
+ // of what we should normally have with React. If yes, we'll report an
+ // error. We don't want to report if the input attribute name is the
+ // standard name though!
const standardName = getStandardName(name, context);
- if (!isTagName(node) || !standardName) {
+ if (!isTagName(node) || !standardName || standardName === name) {
return;
}
context.report({
diff --git a/tests/lib/rules/no-unknown-property.js b/tests/lib/rules/no-unknown-property.js
index 21197a4e06..5d9effecfa 100644
--- a/tests/lib/rules/no-unknown-property.js
+++ b/tests/lib/rules/no-unknown-property.js
@@ -37,6 +37,7 @@ ruleTester.run('no-unknown-property', rule, {
{code: '