diff --git a/packages/button/src/LionButton.js b/packages/button/src/LionButton.js
index 46526e5f3..8a7281e32 100644
--- a/packages/button/src/LionButton.js
+++ b/packages/button/src/LionButton.js
@@ -1,9 +1,6 @@
-import { css, html, DelegateMixin, SlotMixin, DisabledWithTabIndexMixin } from '@lion/core';
-import { LionLitElement } from '@lion/core/src/LionLitElement.js';
+import { css, html, SlotMixin, DisabledWithTabIndexMixin, LitElement } from '@lion/core';
-export class LionButton extends DisabledWithTabIndexMixin(
- DelegateMixin(SlotMixin(LionLitElement)),
-) {
+export class LionButton extends DisabledWithTabIndexMixin(SlotMixin(LitElement)) {
static get properties() {
return {
role: {
@@ -14,6 +11,10 @@ export class LionButton extends DisabledWithTabIndexMixin(
type: Boolean,
reflect: true,
},
+ type: {
+ type: String,
+ reflect: true,
+ },
};
}
@@ -107,14 +108,6 @@ export class LionButton extends DisabledWithTabIndexMixin(
];
}
- get delegations() {
- return {
- ...super.delegations,
- target: () => this.$$slot('_button'),
- attributes: ['type'],
- };
- }
-
get slots() {
return {
...super.slots,
@@ -129,9 +122,14 @@ export class LionButton extends DisabledWithTabIndexMixin(
};
}
+ get _nativeButtonNode() {
+ return this.querySelector('[slot=_button]');
+ }
+
constructor() {
super();
this.role = 'button';
+ this.type = 'submit';
this.active = false;
this.__setupDelegationInConstructor();
}
@@ -146,12 +144,22 @@ export class LionButton extends DisabledWithTabIndexMixin(
this.__teardownEvents();
}
+ updated(changedProperties) {
+ super.updated(changedProperties);
+ if (changedProperties.has('type')) {
+ const native = this._nativeButtonNode;
+ if (native) {
+ native.type = this.type;
+ }
+ }
+ }
+
_redispatchClickEvent(oldEvent) {
// replacing `MouseEvent` with `oldEvent.constructor` breaks IE
const newEvent = new MouseEvent(oldEvent.type, oldEvent);
newEvent.__isRedispatchedOnNativeButton = true;
this.__enforceHostEventTarget(newEvent);
- this.$$slot('_button').dispatchEvent(newEvent);
+ this._nativeButtonNode.dispatchEvent(newEvent);
}
/**
diff --git a/packages/button/test/lion-button.test.js b/packages/button/test/lion-button.test.js
index 0b6792aa6..713f5ac01 100644
--- a/packages/button/test/lion-button.test.js
+++ b/packages/button/test/lion-button.test.js
@@ -27,23 +27,26 @@ describe('lion-button', () => {
expect(el.getAttribute('tabindex')).to.equal('0');
});
- it('has no type by default on the native button', async () => {
+ it('has .type="submit" and type="submit" by default', async () => {
const el = await fixture(`foo`);
- const nativeButton = el.$$slot('_button');
- expect(nativeButton.getAttribute('type')).to.be.null;
+ expect(el.type).to.equal('submit');
+ expect(el.getAttribute('type')).to.be.equal('submit');
+ expect(el._nativeButtonNode.type).to.equal('submit');
+ expect(el._nativeButtonNode.getAttribute('type')).to.be.equal('submit');
});
- it('has type="submit" on the native button when set', async () => {
- const el = await fixture(`foo`);
- const nativeButton = el.$$slot('_button');
- expect(nativeButton.getAttribute('type')).to.equal('submit');
+ it('sync type down to the native button', async () => {
+ const el = await fixture(`foo`);
+ expect(el.type).to.equal('button');
+ expect(el.getAttribute('type')).to.be.equal('button');
+ expect(el._nativeButtonNode.type).to.equal('button');
+ expect(el._nativeButtonNode.getAttribute('type')).to.be.equal('button');
});
it('hides the native button in the UI', async () => {
const el = await fixture(`foo`);
- const nativeButton = el.$$slot('_button');
- expect(nativeButton.getAttribute('tabindex')).to.equal('-1');
- expect(window.getComputedStyle(nativeButton).visibility).to.equal('hidden');
+ expect(el._nativeButtonNode.getAttribute('tabindex')).to.equal('-1');
+ expect(window.getComputedStyle(el._nativeButtonNode).visibility).to.equal('hidden');
});
it('can be disabled imperatively', async () => {