// scope all <link> tags inside of the <body>
$('body').scopeLinkTags();

// OR specifically define the scoped section/container
$('.scoped-section').scopeLinkTags();

// OR even target specific <link> tags with your own custom selector
$('link[data-scoped]').scopeLinkTags();

Options

The scopeLinkTags() method optionally accepts an object with the following parameters:

styleTagSelector

Type: String (Default: 'style')
Can be used to change the selector used to find the <style> tags.

cssLinkSelector

Type: String (Default: 'link[type="text/css"]')
Can be used to change the selector used to find the <link> tags.

cssRuleRegex

Type: Regex
Can be used to change the Regex that is used to detect each separate CSS selector.

useScopedStyle

Type: Boolean (Default: true)
Define whether scoped <style> tags may be used when supported.

useParentElementID

Type: Boolean (Default: true)
Define whether the ID of the <link> parent element may be used when available. Otherwise a new unique [class] will be generated and used for each <link> tag.

scopeCssSelector

Type: String
Explicitly defines the parent CSS selector to be used for scoping.

Methods

destroy

You can revert the effects by using the destroy method:

$('body').scopeLinkTags('destroy');

scopeCss(css, scopeSelector[, cssRuleRegex])

The method that scopes the CSS rules is globally available:

var myCss = "p { color: blue; }";
var scopedCss = $.fn.scopeLinkTags.scopeCss(myCss, '.myScopedBlueArea');

The jQuery plugin instance can be rertieved from the generated <style> tag with:

var instance $('.scopedArea > style').data('scopeLinkTags');

Notes

In case that the browser natively supports <style scoped>, it will be used to scope the <link> tag CSS. Can be disabled using the useScopedStyle option.
When <style scoped> is not supported, the plugin will use the [id] of the container element, or a newly created unique [class], as a parent selector for the CSS rules detected (using a REGEX replace).

Limitations

Only <link> tags that have the [type="text/css"] attribute will be processed.
Does not apply to externally loaded stylesheets (via @import).
When wrapping the detected CSS with a parent CSS selector
- Expect to work on valid CSS, even when minified.
- Please open a ticket if you find a case that the used REGEX doesn't work

Keywords

FAQs

What is jquery-scopelinktags?

Is jquery-scopelinktags popular?

Is jquery-scopelinktags well maintained?

Package last updated on 11 Mar 2017

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

jquery-scopelinktags