Allow removing extension inheritance with this-only: option

src/htmx.js

@@ -4910,23 +4910,30 @@ var htmx = (function() {
    * @returns {HtmxExtension[]}
    */
   function getExtensions(elt, extensionsToReturn, extensionsToIgnore) {
-    if (extensionsToReturn == undefined) {
+    const isParentScan = !!extensionsToReturn
+    if (!extensionsToReturn) {
       extensionsToReturn = []
     }
-    if (elt == undefined) {
+    if (!elt) {
       return extensionsToReturn
     }
-    if (extensionsToIgnore == undefined) {
+    if (!extensionsToIgnore) {
       extensionsToIgnore = []
     }
     const extensionsForElement = getAttributeValue(elt, 'hx-ext')
     if (extensionsForElement) {
       forEach(extensionsForElement.split(','), function(extensionName) {
-        extensionName = extensionName.replace(/ /g, '')
-        if (extensionName.slice(0, 7) == 'ignore:') {
+        extensionName = extensionName.trim()
+        if (extensionName.indexOf('ignore:') === 0) {
           extensionsToIgnore.push(extensionName.slice(7))
           return
         }
+        if (extensionName.indexOf('this-only:') === 0) {
+          if (isParentScan) {
+            return
+          }
+          extensionName = extensionName.slice(10)
+        }
         if (extensionsToIgnore.indexOf(extensionName) < 0) {
           const extension = extensions[extensionName]
           if (extension && extensionsToReturn.indexOf(extension) < 0) {

test/attributes/hx-ext.js

@@ -156,4 +156,28 @@ describe('hx-ext attribute', function() {
 
     ext5Calls.should.equal(1)
   })
+
+  it('Extensions can be applied to this element only properly', function() {
+    this.server.respondWith('GET', '/test', 'Clicked!')
+
+    make('<div id="div-AA" hx-ext="this-only:ext-1,ext-2,ext-5" hx-get="/test" foo="foo" hx-trigger="click">Click Me!' +
+            '<div id="div-BB" hx-ext="ignore:ext-5"><button id="btn-BB" hx-get="/test" foo="foo" hx-trigger="click consume"></button></div></div>')
+
+    var div1 = byId('div-AA')
+    var btn2 = byId('btn-BB')
+
+    btn2.click()
+    this.server.respond()
+    ext1Calls.should.equal(0)
+    ext2Calls.should.equal(1)
+    ext3Calls.should.equal(0)
+
+    div1.click()
+    this.server.respond()
+    ext1Calls.should.equal(1)
+    ext2Calls.should.equal(2)
+    ext3Calls.should.equal(0)
+
+    ext5Calls.should.equal(1)
+  })
 })

www/content/attributes/hx-ext.md

@@ -14,8 +14,7 @@ and on the `body` tag for it to apply to all htmx requests.
 * `hx-ext` is both inherited and merged with parent elements, so you can specify extensions on any element in the DOM 
 hierarchy and it will apply to all child elements. 
 
-* You can ignore an extension that is defined by a parent node using `hx-ext="ignore:extensionName"` 
-
+* You can ignore an extension that is defined by a parent element using `hx-ext="ignore:extensionName"` 
 
 ```html
 <div hx-ext="example">
@@ -26,3 +25,12 @@ hierarchy and it will apply to all child elements.
 </div>
 ```
 
+* If an extension needs to apply only to a single element you can override inheritance on an element using `hx-ext="this-only:extensionName"` 
+
+```html
+<div hx-ext="this-only:example"> <!-- "Example" extension is used just on this element only -->
+  <div>
+    ... but it will not be used in this part.
+  </div>
+</div>
+```