Using web fonts with Polymer custom elements
I was having issues with loading Typekit fonts into a Polymer component.
What I had initially in my-element.js:
import {html, PolymerElement} from "../node_modules/@polymer/polymer/polymer-element.js";
export class MyElement extends PolymerElement {
static get template() {
return html`
<style>
@import url(https://use.typekit.net/mykit.css)
.my-class { font-family: "typekit-font-family"; }
</style>
<div class$="my-class">
<slot/>
</div>
`;
}
}
window.customElements.define("my-element", MyElement);
I learned that @import url() is not a good approach, so I replaced this with how polymerelements/paper-styles imports Roboto:
typekit-loader.js:
// Based on https://github.com/PolymerElements/font-roboto/blob/master/roboto.js
// and https://github.com/PolymerElements/paper-styles
export {}; // ensure this file can only be parsed as a module.
// Give the user the choice to opt out of font loading.
if (!window.polymerSkipLoadingFontRoboto) {
const link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.crossOrigin = "anonymous";
link.href = "https://use.typekit.net/mykit.css";
document.head.appendChild(link);
}
my-element.js:
import {html, PolymerElement} from "../node_modules/@polymer/polymer/polymer-element.js";
import "./typekit-loader.js";
export class MyElement extends PolymerElement {
static get template() {
return html`
<style>
.my-class { font-family: "typekit-font-family"; }
</style>
<div class$="my-class">
<slot/>
</div>
`;
}
}
window.customElements.define("my-element", MyElement);
What typekit-loader.js essentially ends up doing is adding a <link rel="stylesheet" /> tag to the <head> of the document that links to and makes use of my-element.js. This seems to work, as I can see my typekit fonts being used.
But my question is why does it work? Shadow DOM isn't supposed to have access to the host page's own styles, so how is my div getting the custom font? How is linking to a web font different from linking to any random css file in the <head> of the document? If I added a style rule to the host document saying that .my-class should be red, it doesn't apply.
polymer shadow-dom custom-element typekit
asked Nov 12 '18 at 9:24
Elise
3,00542640
add a comment |
I was having issues with loading Typekit fonts into a Polymer component.
What I had initially in my-element.js:
import {html, PolymerElement} from "../node_modules/@polymer/polymer/polymer-element.js";
export class MyElement extends PolymerElement {
static get template() {
return html`
<style>
@import url(https://use.typekit.net/mykit.css)
.my-class { font-family: "typekit-font-family"; }
</style>
<div class$="my-class">
<slot/>
</div>
`;
}
}
window.customElements.define("my-element", MyElement);
I learned that @import url() is not a good approach, so I replaced this with how polymerelements/paper-styles imports Roboto:
typekit-loader.js:
// Based on https://github.com/PolymerElements/font-roboto/blob/master/roboto.js
// and https://github.com/PolymerElements/paper-styles
export {}; // ensure this file can only be parsed as a module.
// Give the user the choice to opt out of font loading.
if (!window.polymerSkipLoadingFontRoboto) {
const link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.crossOrigin = "anonymous";
link.href = "https://use.typekit.net/mykit.css";
document.head.appendChild(link);
}
my-element.js:
import {html, PolymerElement} from "../node_modules/@polymer/polymer/polymer-element.js";
import "./typekit-loader.js";
export class MyElement extends PolymerElement {
static get template() {
return html`
<style>
.my-class { font-family: "typekit-font-family"; }
</style>
<div class$="my-class">
<slot/>
</div>
`;
}
}
window.customElements.define("my-element", MyElement);
What typekit-loader.js essentially ends up doing is adding a <link rel="stylesheet" /> tag to the <head> of the document that links to and makes use of my-element.js. This seems to work, as I can see my typekit fonts being used.
But my question is why does it work? Shadow DOM isn't supposed to have access to the host page's own styles, so how is my div getting the custom font? How is linking to a web font different from linking to any random css file in the <head> of the document? If I added a style rule to the host document saying that .my-class should be red, it doesn't apply.
polymer shadow-dom custom-element typekit
asked Nov 12 '18 at 9:24
Elise
3,00542640
add a comment |
I was having issues with loading Typekit fonts into a Polymer component.
What I had initially in my-element.js:
import {html, PolymerElement} from "../node_modules/@polymer/polymer/polymer-element.js";
export class MyElement extends PolymerElement {
static get template() {
return html`
<style>
@import url(https://use.typekit.net/mykit.css)
.my-class { font-family: "typekit-font-family"; }
</style>
<div class$="my-class">
<slot/>
</div>
`;
}
}
window.customElements.define("my-element", MyElement);
I learned that @import url() is not a good approach, so I replaced this with how polymerelements/paper-styles imports Roboto:
typekit-loader.js:
// Based on https://github.com/PolymerElements/font-roboto/blob/master/roboto.js
// and https://github.com/PolymerElements/paper-styles
export {}; // ensure this file can only be parsed as a module.
// Give the user the choice to opt out of font loading.
if (!window.polymerSkipLoadingFontRoboto) {
const link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.crossOrigin = "anonymous";
link.href = "https://use.typekit.net/mykit.css";
document.head.appendChild(link);
}
my-element.js:
import {html, PolymerElement} from "../node_modules/@polymer/polymer/polymer-element.js";
import "./typekit-loader.js";
export class MyElement extends PolymerElement {
static get template() {
return html`
<style>
.my-class { font-family: "typekit-font-family"; }
</style>
<div class$="my-class">
<slot/>
</div>
`;
}
}
window.customElements.define("my-element", MyElement);
What typekit-loader.js essentially ends up doing is adding a <link rel="stylesheet" /> tag to the <head> of the document that links to and makes use of my-element.js. This seems to work, as I can see my typekit fonts being used.
But my question is why does it work? Shadow DOM isn't supposed to have access to the host page's own styles, so how is my div getting the custom font? How is linking to a web font different from linking to any random css file in the <head> of the document? If I added a style rule to the host document saying that .my-class should be red, it doesn't apply.
polymer shadow-dom custom-element typekit
asked Nov 12 '18 at 9:24
Elise
3,00542640
I was having issues with loading Typekit fonts into a Polymer component.
What I had initially in my-element.js:
import {html, PolymerElement} from "../node_modules/@polymer/polymer/polymer-element.js";
export class MyElement extends PolymerElement {
static get template() {
return html`
<style>
@import url(https://use.typekit.net/mykit.css)
.my-class { font-family: "typekit-font-family"; }
</style>
<div class$="my-class">
<slot/>
</div>
`;
}
}
window.customElements.define("my-element", MyElement);
I learned that @import url() is not a good approach, so I replaced this with how polymerelements/paper-styles imports Roboto:
typekit-loader.js:
// Based on https://github.com/PolymerElements/font-roboto/blob/master/roboto.js
// and https://github.com/PolymerElements/paper-styles
export {}; // ensure this file can only be parsed as a module.
// Give the user the choice to opt out of font loading.
if (!window.polymerSkipLoadingFontRoboto) {
const link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.crossOrigin = "anonymous";
link.href = "https://use.typekit.net/mykit.css";
document.head.appendChild(link);
}
my-element.js:
import {html, PolymerElement} from "../node_modules/@polymer/polymer/polymer-element.js";
import "./typekit-loader.js";
export class MyElement extends PolymerElement {
static get template() {
return html`
<style>
.my-class { font-family: "typekit-font-family"; }
</style>
<div class$="my-class">
<slot/>
</div>
`;
}
}
window.customElements.define("my-element", MyElement);
What typekit-loader.js essentially ends up doing is adding a <link rel="stylesheet" /> tag to the <head> of the document that links to and makes use of my-element.js. This seems to work, as I can see my typekit fonts being used.
But my question is why does it work? Shadow DOM isn't supposed to have access to the host page's own styles, so how is my div getting the custom font? How is linking to a web font different from linking to any random css file in the <head> of the document? If I added a style rule to the host document saying that .my-class should be red, it doesn't apply.
polymer shadow-dom custom-element typekit
polymer shadow-dom custom-element typekit
asked Nov 12 '18 at 9:24
Elise
3,00542640
asked Nov 12 '18 at 9:24
Elise
3,00542640
asked Nov 12 '18 at 9:24
Elise
3,00542640
asked Nov 12 '18 at 9:24
Elise
3,00542640
asked Nov 12 '18 at 9:24
Elise
3,00542640
3,00542640
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Shadow DOM will isolate user-defined CSS styles only.
Default CSS styles - CSS styles applied to every new document - will style be applied. For example: background, text color, padding...
The default CSS background-color is inherit. So if you define it globally as blue then it will be displayed blue even inside a Shadow DOM.
That's quite the same with fonts: the font defined or loaded globally is inherited in the Shadow DOM and can be displayed in it.
answered Nov 14 '18 at 15:02
Supersharp
12.9k22868
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53259145%2fusing-web-fonts-with-polymer-custom-elements%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Shadow DOM will isolate user-defined CSS styles only.
Default CSS styles - CSS styles applied to every new document - will style be applied. For example: background, text color, padding...
The default CSS background-color is inherit. So if you define it globally as blue then it will be displayed blue even inside a Shadow DOM.
That's quite the same with fonts: the font defined or loaded globally is inherited in the Shadow DOM and can be displayed in it.
answered Nov 14 '18 at 15:02
Supersharp
12.9k22868
add a comment |
Shadow DOM will isolate user-defined CSS styles only.
Default CSS styles - CSS styles applied to every new document - will style be applied. For example: background, text color, padding...
The default CSS background-color is inherit. So if you define it globally as blue then it will be displayed blue even inside a Shadow DOM.
That's quite the same with fonts: the font defined or loaded globally is inherited in the Shadow DOM and can be displayed in it.
answered Nov 14 '18 at 15:02
Supersharp
12.9k22868
add a comment |
Shadow DOM will isolate user-defined CSS styles only.
Default CSS styles - CSS styles applied to every new document - will style be applied. For example: background, text color, padding...
The default CSS background-color is inherit. So if you define it globally as blue then it will be displayed blue even inside a Shadow DOM.
That's quite the same with fonts: the font defined or loaded globally is inherited in the Shadow DOM and can be displayed in it.
answered Nov 14 '18 at 15:02
Supersharp
12.9k22868
Shadow DOM will isolate user-defined CSS styles only.
Default CSS styles - CSS styles applied to every new document - will style be applied. For example: background, text color, padding...
The default CSS background-color is inherit. So if you define it globally as blue then it will be displayed blue even inside a Shadow DOM.
That's quite the same with fonts: the font defined or loaded globally is inherited in the Shadow DOM and can be displayed in it.
answered Nov 14 '18 at 15:02
Supersharp
12.9k22868
answered Nov 14 '18 at 15:02
Supersharp
12.9k22868
answered Nov 14 '18 at 15:02
Supersharp
12.9k22868
answered Nov 14 '18 at 15:02
Supersharp
12.9k22868
12.9k22868
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53259145%2fusing-web-fonts-with-polymer-custom-elements%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
