Skip to content

Commit dbdf066

Browse files
bicknellrbicknellr
committed
Adds fast return for active element not a descendant; adds tests for active element in light DOM.
1 parent bf8faaf commit dbdf066

File tree

5 files changed

+274
-86
lines changed

5 files changed

+274
-86
lines changed

‎src/lib/dom-api.html

+25-19
Original file line numberDiff line numberDiff line change
@@ -615,40 +615,46 @@
615615

616616
activeElement: {
617617
get: function() {
618-
var ownerDocument = this.node.ownerDocument;
619-
var trueDocument = ownerDocument || this.node;
618+
var active = document.activeElement;
619+
if (!active) return null;
620620

621-
// Not a document or shady root.
622-
if (ownerDocument && !this.node._isShadyRoot) {
623-
return this.node.activeElement;
624-
}
621+
var nodeIsDocument = this.node === document;
625622

626-
var active = trueDocument.activeElement;
627-
if (!active) return null;
623+
if (!nodeIsDocument) {
624+
// If this node isn't a document or shady root, then it doesn't
625+
// have an active element.
626+
if (!this.node._isShadyRoot) return null;
627+
628+
// If this shady root's host is the active element or the active
629+
// element is not a descendant of the host, then it doesn't have
630+
// an active element.
631+
if (this.node.host === active || !this.node.host.contains(active)) {
632+
return null;
633+
}
634+
}
628635

629-
// `this.node` is either a document or shady root; iterate upwards
630-
// to find the active element's most shallow host (relative to this
631-
// node or its containing document).
636+
// This node is either the document or a shady root of which the
637+
// active element is a descendant of its host; iterate upwards to
638+
// find the active element's most shallow host.
632639
var activeRoot = Polymer.dom(active).getOwnerRoot();
633640
while (activeRoot && activeRoot !== this.node) {
634641
active = activeRoot.host;
635642
activeRoot = Polymer.dom(active).getOwnerRoot();
636643
}
637644

638-
// This node is a document and we’ve reached it; we should return the
639-
// active element's most shallow host.
640-
if (!ownerDocument && !activeRoot) {
645+
// This node is the document and we've found the active element's
646+
// most shallow host.
647+
if (nodeIsDocument && !activeRoot) {
641648
return active;
642649
}
643650

644-
// This node is a non-document shady root and we've reached it; the
645-
// active element is a (potentially deep) descendant of this node.
646-
if (ownerDocument && activeRoot === this.node) {
651+
// This node is a shady root and we've found the active element's
652+
// most shallow host (within the shady root).
653+
if (!nodeIsDocument && activeRoot === this.node) {
647654
return active;
648655
}
649656

650-
// The active element does not exist within this shady root or its
651-
// deep descendants.
657+
// The active element is within the light DOM of this shady root.
652658
return null;
653659
},
654660
configurable: true

‎test/unit/polymer-dom-elements.html

+134-29
Original file line numberDiff line numberDiff line change
@@ -358,76 +358,141 @@
358358
</script>
359359
</dom-module>
360360

361-
<dom-module id="x-shadow-host-root-0-0">
361+
362+
<dom-module id="x-shadow-host-root">
363+
<template>
364+
<content></content>
365+
<div>
366+
<div>
367+
<x-shadow-host-root-0>
368+
<x-shadow-host-root-0-light></x-shadow-host-root-0-light>
369+
</x-shadow-host-root-0>
370+
</div>
371+
</div>
372+
<div>
373+
<x-shadow-host-root-1>
374+
<x-shadow-host-root-1-light></x-shadow-host-root-1-light>
375+
</x-shadow-host-root-1>
376+
</div>
377+
</template>
362378
<script>
363379
Polymer({
364-
is: 'x-shadow-host-root-0-0',
380+
is: 'x-shadow-host-root',
365381
hostAttributes: {
366-
tabindex: "-1",
382+
tabindex: '-1'
367383
}
368384
});
369385
</script>
370386
</dom-module>
371387

372-
<dom-module id="x-shadow-host-root-0-1">
388+
<dom-module id="x-shadow-host-root-light">
373389
<script>
374390
Polymer({
375-
is: 'x-shadow-host-root-0-1',
391+
is: 'x-shadow-host-root-light',
376392
hostAttributes: {
377-
tabindex: "-1",
393+
tabindex: '-1'
378394
}
379395
});
380396
</script>
381397
</dom-module>
382398

383399
<dom-module id="x-shadow-host-root-0">
384400
<template>
401+
<content></content>
385402
<div>
386-
<x-shadow-host-root-0-0></x-shadow-host-root-0-0>
403+
<x-shadow-host-root-0-0>
404+
<x-shadow-host-root-0-0-light></x-shadow-host-root-0-0-light>
405+
</x-shadow-host-root-0-0>
387406
</div>
388-
<x-shadow-host-root-0-1></x-shadow-host-root-0-1>
407+
<x-shadow-host-root-0-1>
408+
<x-shadow-host-root-0-1-light></x-shadow-host-root-0-1-light>
409+
</x-shadow-host-root-0-1>
389410
</template>
390411
<script>
391412
Polymer({
392413
is: 'x-shadow-host-root-0',
393414
hostAttributes: {
394-
tabindex: "-1",
415+
tabindex: '-1'
395416
}
396417
});
397418
</script>
398419
</dom-module>
399420

400-
<dom-module id="x-shadow-host-root-1-0">
421+
<dom-module id="x-shadow-host-root-0-light">
401422
<script>
402423
Polymer({
403-
is: 'x-shadow-host-root-1-0',
424+
is: 'x-shadow-host-root-0-light',
404425
hostAttributes: {
405-
tabindex: "-1",
426+
tabindex: '-1'
406427
}
407428
});
408429
</script>
409430
</dom-module>
410431

411-
<dom-module id="x-shadow-host-root-1-1">
432+
<dom-module id="x-shadow-host-root-0-0">
433+
<template>
434+
<content></content>
435+
</template>
412436
<script>
413437
Polymer({
414-
is: 'x-shadow-host-root-1-1',
438+
is: 'x-shadow-host-root-0-0',
439+
hostAttributes: {
440+
tabindex: '-1'
441+
}
442+
});
443+
</script>
444+
</dom-module>
445+
446+
<dom-module id="x-shadow-host-root-0-0-light">
447+
<script>
448+
Polymer({
449+
is: 'x-shadow-host-root-0-0-light',
450+
hostAttributes: {
451+
tabindex: '-1'
452+
}
453+
});
454+
</script>
455+
</dom-module>
456+
457+
<dom-module id="x-shadow-host-root-0-1">
458+
<template>
459+
<content></content>
460+
</template>
461+
<script>
462+
Polymer({
463+
is: 'x-shadow-host-root-0-1',
464+
hostAttributes: {
465+
tabindex: '-1'
466+
}
467+
});
468+
</script>
469+
</dom-module>
470+
471+
<dom-module id="x-shadow-host-root-0-1-light">
472+
<script>
473+
Polymer({
474+
is: 'x-shadow-host-root-0-1-light',
415475
hostAttributes: {
416-
tabindex: "-1",
476+
tabindex: '-1'
417477
}
418478
});
419479
</script>
420480
</dom-module>
421481

422482
<dom-module id="x-shadow-host-root-1">
423483
<template>
484+
<content></content>
424485
<div>
425-
<x-shadow-host-root-1-0></x-shadow-host-root-1-0>
486+
<x-shadow-host-root-1-0>
487+
<x-shadow-host-root-1-0-light></x-shadow-host-root-1-0-light>
488+
</x-shadow-host-root-1-0>
426489
</div>
427490
<div>
428491
<div>
429492
<div>
430-
<x-shadow-host-root-1-1></x-shadow-host-root-1-1>
493+
<x-shadow-host-root-1-1>
494+
<x-shadow-host-root-1-1-light></x-shadow-host-root-1-1-light>
495+
</x-shadow-host-root-1-1>
431496
</div>
432497
</div>
433498
</div>
@@ -436,28 +501,68 @@
436501
Polymer({
437502
is: 'x-shadow-host-root-1',
438503
hostAttributes: {
439-
tabindex: "-1",
504+
tabindex: '-1'
440505
}
441506
});
442507
</script>
443508
</dom-module>
444509

445-
<dom-module id="x-shadow-host-root">
510+
<dom-module id="x-shadow-host-root-1-light">
511+
<script>
512+
Polymer({
513+
is: 'x-shadow-host-root-1-light',
514+
hostAttributes: {
515+
tabindex: '-1'
516+
}
517+
});
518+
</script>
519+
</dom-module>
520+
521+
<dom-module id="x-shadow-host-root-1-0">
446522
<template>
447-
<div>
448-
<div>
449-
<x-shadow-host-root-0></x-shadow-host-root-0>
450-
</div>
451-
</div>
452-
<div>
453-
<x-shadow-host-root-1></x-shadow-host-root-1>
454-
</div>
523+
<content></content>
455524
</template>
456525
<script>
457526
Polymer({
458-
is: 'x-shadow-host-root',
527+
is: 'x-shadow-host-root-1-0',
528+
hostAttributes: {
529+
tabindex: '-1'
530+
}
531+
});
532+
</script>
533+
</dom-module>
534+
535+
<dom-module id="x-shadow-host-root-1-0-light">
536+
<script>
537+
Polymer({
538+
is: 'x-shadow-host-root-1-0-light',
539+
hostAttributes: {
540+
tabindex: '-1'
541+
}
542+
});
543+
</script>
544+
</dom-module>
545+
546+
<dom-module id="x-shadow-host-root-1-1">
547+
<template>
548+
<content></content>
549+
</template>
550+
<script>
551+
Polymer({
552+
is: 'x-shadow-host-root-1-1',
553+
hostAttributes: {
554+
tabindex: '-1'
555+
}
556+
});
557+
</script>
558+
</dom-module>
559+
560+
<dom-module id="x-shadow-host-root-1-1-light">
561+
<script>
562+
Polymer({
563+
is: 'x-shadow-host-root-1-1-light',
459564
hostAttributes: {
460-
tabindex: "-1",
565+
tabindex: '-1'
461566
}
462567
});
463568
</script>

‎test/unit/polymer-dom-shadow.html

+3-1
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,9 @@
5757

5858
<x-wrapped></x-wrapped>
5959

60-
<x-shadow-host-root></x-shadow-host-root>
60+
<x-shadow-host-root>
61+
<x-shadow-host-root-light></x-shadow-host-root-light>
62+
</x-shadow-host-root>
6163

6264
<script src="polymer-dom.js"></script>
6365

‎test/unit/polymer-dom.html

+3-1
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,9 @@
5757

5858
<x-wrapped></x-wrapped>
5959

60-
<x-shadow-host-root></x-shadow-host-root>
60+
<x-shadow-host-root>
61+
<x-shadow-host-root-light></x-shadow-host-root-light>
62+
</x-shadow-host-root>
6163

6264
<script src="polymer-dom.js"></script>
6365

0 commit comments

Comments
 (0)