Skip to content

refactor(platform): consolidate and expose shadow dom detection utilities #18582

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Mar 12, 2020

Conversation

crisbeto
Copy link
Member

@crisbeto crisbeto commented Feb 22, 2020

Over time we had accumulated the same utility for finding the shadow root of an element in multiple places. These changes move it into a common place under cdk/platform.

Note: I'm setting this to a P2, because it's required to make more shadow DOM-related fixes without duplicating the logic.

@crisbeto crisbeto added P2 The issue is important to a large percentage of users, with a workaround target: patch This PR is targeted for the next patch release labels Feb 22, 2020
@googlebot googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Feb 22, 2020
@crisbeto crisbeto force-pushed the shadow-dom-utilities branch from 430d397 to cafafbb Compare February 22, 2020 11:40
@crisbeto crisbeto requested a review from mmalerba as a code owner February 22, 2020 11:40
@crisbeto crisbeto force-pushed the shadow-dom-utilities branch 2 times, most recently from 0b72e73 to 9bd9660 Compare February 22, 2020 11:46
if (shadowDomIsSupported == null) {
const head = typeof document !== 'undefined' ? document.head : null;
shadowDomIsSupported = !!(head && ((head as any).createShadowRoot || head.attachShadow));
}

return shadowDomIsSupported;
}

/** Gets the shadow root of an element, if supported and the element is inside the Shadow DOM. */
export function getShadowRoot(element: HTMLElement): Node | null {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is cdk/platform the right place for this? I'm not sure we have a package that really makes sense for it currently. I would think something like cdk/dom would be the right place

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I personally could see it live in something like cdk/platform/dom.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm extremely hesitant to get into the business of general DOM helper APIs. I think it's a slippery slope in terms of adding more, and they tend to go out of date over the years. I'm okay with this living here if we keep it as a private API.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's not really private if we export it at the top level though. Also we're already in the business of detecting other DOM APIs like supported input types and scroll behavior so I don't see how detecting if the Shadow DOM is supported is any different.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We have a cdk/testing/private, maybe we could make cdk/platform/private (I'm less concerned about it being in this package if its private)

Copy link
Member Author

@crisbeto crisbeto Feb 25, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd be fine with putting it under private. The main concern I'm trying to address with these changes is the code duplication.

@mmalerba mmalerba added target: minor This PR is targeted for the next minor release and removed target: patch This PR is targeted for the next patch release labels Feb 25, 2020
@mmalerba
Copy link
Contributor

changing to target: minor since this exposes new APIs

Copy link
Member

@devversion devversion left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In general LGTM (except for the question on where to put this)

@crisbeto crisbeto force-pushed the shadow-dom-utilities branch 2 times, most recently from 4a42bfc to a333883 Compare February 29, 2020 10:29
@crisbeto
Copy link
Member Author

@mmalerba @jelbourn I've switched the APIs back to private based on our discussion. I'm also changing it back to a patch since we're no longer adding new APIs.

…ties

Over time we had accumulated the same utility for finding the shadow root of an element in multiple places. These changes move it into a common place under `cdk/platform`.

I also decided to remove the underscore from `_supportsShadowDom` so it's officially a public API. It was already exposed under `cdk/platform` so there was nothing stopping people from using it, but the underscore looked weird. The API should be stable enough, since we've had it for more than a year in multiple components and we haven't had issues with it.
@crisbeto crisbeto force-pushed the shadow-dom-utilities branch from a333883 to 4ad46c0 Compare February 29, 2020 10:31
@crisbeto crisbeto added target: patch This PR is targeted for the next patch release and removed target: minor This PR is targeted for the next minor release labels Feb 29, 2020
@mmalerba mmalerba added pr: lgtm action: merge The PR is ready for merge by the caretaker labels Feb 29, 2020
@andrewseguin andrewseguin merged commit fa96c8a into angular:master Mar 12, 2020
andrewseguin pushed a commit that referenced this pull request Mar 12, 2020
…ties (#18582)

Over time we had accumulated the same utility for finding the shadow root of an element in multiple places. These changes move it into a common place under `cdk/platform`.

I also decided to remove the underscore from `_supportsShadowDom` so it's officially a public API. It was already exposed under `cdk/platform` so there was nothing stopping people from using it, but the underscore looked weird. The API should be stable enough, since we've had it for more than a year in multiple components and we haven't had issues with it.

(cherry picked from commit fa96c8a)
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Apr 12, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
action: merge The PR is ready for merge by the caretaker cla: yes PR author has agreed to Google's Contributor License Agreement P2 The issue is important to a large percentage of users, with a workaround target: patch This PR is targeted for the next patch release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants