Why does changing ::content to ::slotted(..) not work?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
0
Enviroment: Polymer 3
Problem:
I've changed the ::content to ::slotted, but then the style does not work:
before change
.ContentWrapper,
.ScrollAndHeaderContainer,
:host ::content .my-data-grid--BaseHTMLWrapper {
flex: 1 1 auto;
display: flex;
flex-flow: column nowrap;
min-height: 0;
}
after change
.ContentWrapper,
.ScrollAndHeaderContainer,
:host ::slotted(.my-data-grid--BaseHTMLWrapper) {
flex: 1 1 auto;
display: flex;
flex-flow: column nowrap;
min-height: 0;
}
This is how I use it:
<div class="my-data-grid--BaseHTMLWrapper">
The style does not work after this change.
Can someone give me an explanation why please? I've totally no clue.
css polymer
edited Nov 22 '18 at 12:54
Scoots
2,19011428
asked Nov 22 '18 at 12:41
michael-mammutmichael-mammut
68521329
add a comment |
0
Enviroment: Polymer 3
Problem:
I've changed the ::content to ::slotted, but then the style does not work:
before change
.ContentWrapper,
.ScrollAndHeaderContainer,
:host ::content .my-data-grid--BaseHTMLWrapper {
flex: 1 1 auto;
display: flex;
flex-flow: column nowrap;
min-height: 0;
}
after change
.ContentWrapper,
.ScrollAndHeaderContainer,
:host ::slotted(.my-data-grid--BaseHTMLWrapper) {
flex: 1 1 auto;
display: flex;
flex-flow: column nowrap;
min-height: 0;
}
This is how I use it:
<div class="my-data-grid--BaseHTMLWrapper">
The style does not work after this change.
Can someone give me an explanation why please? I've totally no clue.
css polymer
edited Nov 22 '18 at 12:54
Scoots
2,19011428
asked Nov 22 '18 at 12:41
michael-mammutmichael-mammut
68521329
add a comment |
0
0
0
Enviroment: Polymer 3
Problem:
I've changed the ::content to ::slotted, but then the style does not work:
before change
.ContentWrapper,
.ScrollAndHeaderContainer,
:host ::content .my-data-grid--BaseHTMLWrapper {
flex: 1 1 auto;
display: flex;
flex-flow: column nowrap;
min-height: 0;
}
after change
.ContentWrapper,
.ScrollAndHeaderContainer,
:host ::slotted(.my-data-grid--BaseHTMLWrapper) {
flex: 1 1 auto;
display: flex;
flex-flow: column nowrap;
min-height: 0;
}
This is how I use it:
<div class="my-data-grid--BaseHTMLWrapper">
The style does not work after this change.
Can someone give me an explanation why please? I've totally no clue.
css polymer
edited Nov 22 '18 at 12:54
Scoots
2,19011428
asked Nov 22 '18 at 12:41
michael-mammutmichael-mammut
68521329
Enviroment: Polymer 3
Problem:
I've changed the ::content to ::slotted, but then the style does not work:
before change
.ContentWrapper,
.ScrollAndHeaderContainer,
:host ::content .my-data-grid--BaseHTMLWrapper {
flex: 1 1 auto;
display: flex;
flex-flow: column nowrap;
min-height: 0;
}
after change
.ContentWrapper,
.ScrollAndHeaderContainer,
:host ::slotted(.my-data-grid--BaseHTMLWrapper) {
flex: 1 1 auto;
display: flex;
flex-flow: column nowrap;
min-height: 0;
}
This is how I use it:
<div class="my-data-grid--BaseHTMLWrapper">
The style does not work after this change.
Can someone give me an explanation why please? I've totally no clue.
css polymer
css polymer
edited Nov 22 '18 at 12:54
Scoots
2,19011428
asked Nov 22 '18 at 12:41
michael-mammutmichael-mammut
68521329
edited Nov 22 '18 at 12:54
Scoots
2,19011428
asked Nov 22 '18 at 12:41
michael-mammutmichael-mammut
68521329
edited Nov 22 '18 at 12:54
Scoots
2,19011428
edited Nov 22 '18 at 12:54
Scoots
2,19011428
edited Nov 22 '18 at 12:54
Scoots
2,19011428
2,19011428
asked Nov 22 '18 at 12:41
michael-mammutmichael-mammut
68521329
asked Nov 22 '18 at 12:41
michael-mammutmichael-mammut
68521329
asked Nov 22 '18 at 12:41
michael-mammutmichael-mammut
68521329
68521329
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
Here a working example which may help :
DEMO
index.hml :
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://unpkg.com/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script type="module" src="custom-element.js"></script>
</head>
<body>
<custom-element>
<div slot = "test" class="my-data-grid--BaseHTMLWrapper" >SLOT TEST </div>
</custom-element>
</body>
</html>
custom-element.js:
import { PolymerElement, html } from 'https://unpkg.com/@polymer/polymer@3.0.0-pre.13/polymer-element.js';
class CustomElement extends PolymerElement {
static get template() {
return html`
<style>
div ::slotted(.my-data-grid--BaseHTMLWrapper) {
flex: 1 1 auto;
display: flex;
flex-flow: column nowrap;
min-height: 0;
font-family: sans-serif;
color:red;
}
</style>
<div><slot name='test'></slot></div>
`;
}
}
customElements.define('custom-element', CustomElement);
answered Nov 22 '18 at 15:03
HakanCHakanC
2,3993814
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
});
}
});
draft saved
draft discarded
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%2f53431277%2fwhy-does-changing-content-to-slotted-not-work%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
0
Here a working example which may help :
DEMO
index.hml :
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://unpkg.com/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script type="module" src="custom-element.js"></script>
</head>
<body>
<custom-element>
<div slot = "test" class="my-data-grid--BaseHTMLWrapper" >SLOT TEST </div>
</custom-element>
</body>
</html>
custom-element.js:
import { PolymerElement, html } from 'https://unpkg.com/@polymer/polymer@3.0.0-pre.13/polymer-element.js';
class CustomElement extends PolymerElement {
static get template() {
return html`
<style>
div ::slotted(.my-data-grid--BaseHTMLWrapper) {
flex: 1 1 auto;
display: flex;
flex-flow: column nowrap;
min-height: 0;
font-family: sans-serif;
color:red;
}
</style>
<div><slot name='test'></slot></div>
`;
}
}
customElements.define('custom-element', CustomElement);
answered Nov 22 '18 at 15:03
HakanCHakanC
2,3993814
add a comment |
0
Here a working example which may help :
DEMO
index.hml :
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://unpkg.com/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script type="module" src="custom-element.js"></script>
</head>
<body>
<custom-element>
<div slot = "test" class="my-data-grid--BaseHTMLWrapper" >SLOT TEST </div>
</custom-element>
</body>
</html>
custom-element.js:
import { PolymerElement, html } from 'https://unpkg.com/@polymer/polymer@3.0.0-pre.13/polymer-element.js';
class CustomElement extends PolymerElement {
static get template() {
return html`
<style>
div ::slotted(.my-data-grid--BaseHTMLWrapper) {
flex: 1 1 auto;
display: flex;
flex-flow: column nowrap;
min-height: 0;
font-family: sans-serif;
color:red;
}
</style>
<div><slot name='test'></slot></div>
`;
}
}
customElements.define('custom-element', CustomElement);
answered Nov 22 '18 at 15:03
HakanCHakanC
2,3993814
add a comment |
0
0
0
Here a working example which may help :
DEMO
index.hml :
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://unpkg.com/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script type="module" src="custom-element.js"></script>
</head>
<body>
<custom-element>
<div slot = "test" class="my-data-grid--BaseHTMLWrapper" >SLOT TEST </div>
</custom-element>
</body>
</html>
custom-element.js:
import { PolymerElement, html } from 'https://unpkg.com/@polymer/polymer@3.0.0-pre.13/polymer-element.js';
class CustomElement extends PolymerElement {
static get template() {
return html`
<style>
div ::slotted(.my-data-grid--BaseHTMLWrapper) {
flex: 1 1 auto;
display: flex;
flex-flow: column nowrap;
min-height: 0;
font-family: sans-serif;
color:red;
}
</style>
<div><slot name='test'></slot></div>
`;
}
}
customElements.define('custom-element', CustomElement);
answered Nov 22 '18 at 15:03
HakanCHakanC
2,3993814
Here a working example which may help :
DEMO
index.hml :
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://unpkg.com/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script type="module" src="custom-element.js"></script>
</head>
<body>
<custom-element>
<div slot = "test" class="my-data-grid--BaseHTMLWrapper" >SLOT TEST </div>
</custom-element>
</body>
</html>
custom-element.js:
import { PolymerElement, html } from 'https://unpkg.com/@polymer/polymer@3.0.0-pre.13/polymer-element.js';
class CustomElement extends PolymerElement {
static get template() {
return html`
<style>
div ::slotted(.my-data-grid--BaseHTMLWrapper) {
flex: 1 1 auto;
display: flex;
flex-flow: column nowrap;
min-height: 0;
font-family: sans-serif;
color:red;
}
</style>
<div><slot name='test'></slot></div>
`;
}
}
customElements.define('custom-element', CustomElement);
answered Nov 22 '18 at 15:03
HakanCHakanC
2,3993814
answered Nov 22 '18 at 15:03
HakanCHakanC
2,3993814
answered Nov 22 '18 at 15:03
HakanCHakanC
2,3993814
answered Nov 22 '18 at 15:03
HakanCHakanC
2,3993814
2,3993814
add a comment |
add a comment |
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f53431277%2fwhy-does-changing-content-to-slotted-not-work%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
