Skip to content

Commit fc490e3

Browse files
EYHNEYHN
committed
feat: shadow dom support
1 parent b5c3102 commit fc490e3

4 files changed

Lines changed: 56 additions & 28 deletions

File tree

‎src/lib/index.d.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
declare interface Element {
2+
createShadowRoot: () => ShadowRoot
3+
}

‎src/lib/view.ts‎

Lines changed: 43 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { ILyricItem } from "./lyric";
88
const defaultPoster = require('../defaultposter.jpg')
99
const htmlTemplate = require('../cplayer.html');
1010
const playIcon = require('../playicon.svg');
11-
require('../scss/cplayer.scss');
11+
const style = require('!css-loader!postcss-loader!sass-loader!../scss/cplayer.scss');
1212

1313
function kanaFilter(str: string) {
1414
const starttag = '<span class="cp-lyric-text-zoomout">';
@@ -54,6 +54,38 @@ const defaultOption: ICplayerViewOption = {
5454
showPlaylist: false
5555
}
5656

57+
function createShadowElement(targetElement: Element, htmlTemplate: string) {
58+
let shadowRoot = (targetElement as any).createShadowRoot() as ShadowRoot;
59+
shadowRoot.innerHTML = htmlTemplate;
60+
let styleElement = document.createElement('style');
61+
styleElement.innerText = style;
62+
shadowRoot.appendChild(styleElement);
63+
return shadowRoot.firstChild as Element;
64+
}
65+
66+
function createBeforeElement(targetElement: Element, htmlTemplate: string) {
67+
let element = document.createElement('div');
68+
element.innerHTML = htmlTemplate;
69+
targetElement.parentNode.insertBefore(element, targetElement);
70+
return targetElement.previousSibling as Element;
71+
}
72+
73+
function createBeforeShadowElement(targetElement: Element, htmlTemplate: string) {
74+
let element = document.createElement('div');
75+
let shadowRoot = (element as any).createShadowRoot() as ShadowRoot;
76+
shadowRoot.innerHTML = htmlTemplate;
77+
let styleElement = document.createElement('style');
78+
styleElement.innerText = style;
79+
shadowRoot.appendChild(styleElement);
80+
targetElement.parentNode.insertBefore(element, targetElement);
81+
return targetElement.previousSibling as Element;
82+
}
83+
84+
function createElement(targetElement: Element, htmlTemplate: string) {
85+
targetElement.innerHTML = htmlTemplate;
86+
return targetElement.lastChild as Element;
87+
}
88+
5789
export default class cplayerView extends EventEmitter {
5890
private elementLinks = returntypeof(this.getElementLinks);
5991
private rootElement: Element;
@@ -69,12 +101,17 @@ export default class cplayerView extends EventEmitter {
69101
};
70102
this.player = player;
71103
if (this.options.generateBeforeElement) {
72-
let newFragment = parseHTML(htmlTemplate);
73-
this.options.element.parentNode.insertBefore(newFragment, this.options.element);
74-
this.rootElement = this.options.element.previousSibling as Element;
104+
if ((this.options.element as any).createShadowRoot) {
105+
this.rootElement = createBeforeShadowElement(this.options.element, htmlTemplate);
106+
} else {
107+
this.rootElement = createBeforeElement(this.options.element, htmlTemplate);
108+
}
75109
} else {
76-
this.options.element.appendChild(parseHTML(htmlTemplate));
77-
this.rootElement = this.options.element.lastChild as Element;
110+
if ((this.options.element as any).createShadowRoot) {
111+
this.rootElement = createShadowElement(this.options.element, htmlTemplate);
112+
} else {
113+
this.rootElement = createElement(this.options.element, htmlTemplate);
114+
}
78115
}
79116
if (options.deleteElementAfterGenerate) {
80117
options.element.parentElement.removeChild(options.element);

‎webpack.config.example.js‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -79,18 +79,16 @@ module.exports = {
7979
{
8080
loader: "css-loader",
8181
options: {
82-
minimize: true,
83-
sourceMap: true
82+
minimize: true
8483
}
8584
},
8685
{
8786
loader: 'postcss-loader',
88-
options: { sourceMap: true }
87+
options: {}
8988
},
9089
{
9190
loader: "sass-loader",
9291
options: {
93-
sourceMap: true
9492
}
9593
}
9694
]
@@ -113,18 +111,16 @@ module.exports = {
113111
{
114112
loader: "css-loader",
115113
options: {
116-
minimize: true,
117-
sourceMap: true
114+
minimize: true
118115
}
119116
},
120117
{
121118
loader: 'postcss-loader',
122-
options: { sourceMap: true }
119+
options: {}
123120
},
124121
{
125122
loader: "less-loader",
126123
options: {
127-
sourceMap: true
128124
}
129125
}
130126
]
@@ -138,14 +134,12 @@ module.exports = {
138134
{
139135
loader: "css-loader",
140136
options: {
141-
minimize: true,
142-
sourceMap: true
137+
minimize: true
143138
}
144139
},
145140
{
146141
loader: "postcss-loader",
147142
options: {
148-
sourceMap: true
149143
}
150144
}
151145
]

‎webpack.config.prod.js‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -53,18 +53,16 @@ module.exports = {
5353
{
5454
loader: "css-loader",
5555
options: {
56-
minimize: true,
57-
sourceMap: true
56+
minimize: true
5857
}
5958
},
6059
{
6160
loader: 'postcss-loader',
62-
options: { sourceMap: true }
61+
options: {}
6362
},
6463
{
6564
loader: "sass-loader",
6665
options: {
67-
sourceMap: true
6866
}
6967
}
7068
]
@@ -87,18 +85,16 @@ module.exports = {
8785
{
8886
loader: "css-loader",
8987
options: {
90-
minimize: true,
91-
sourceMap: true
88+
minimize: true
9289
}
9390
},
9491
{
9592
loader: 'postcss-loader',
96-
options: { sourceMap: true }
93+
options: {}
9794
},
9895
{
9996
loader: "less-loader",
10097
options: {
101-
sourceMap: true
10298
}
10399
}
104100
]
@@ -112,14 +108,12 @@ module.exports = {
112108
{
113109
loader: "css-loader",
114110
options: {
115-
minimize: true,
116-
sourceMap: true
111+
minimize: true
117112
}
118113
},
119114
{
120115
loader: "postcss-loader",
121116
options: {
122-
sourceMap: true
123117
}
124118
}
125119
]

0 commit comments

Comments
 (0)